javascript - jQuery 函数的纯 JS 版本

Question

我有以下 jQuery 代码(我更改了 div 和函数的名称，不会有太大区别)

$(function(){
    $('#div1').bind('touchend',function(){
        function1();
        function2();
    });
});

$(function(){
    $('#div2').bind('touchend',function(){
        function1();
        function3();
    });
});

这是它的纯 JS 版本，它不起作用。

document.getElementById('div1').addEventListener('touchend',function(){
    function1();
    function2();
},false);

document.getElementById('div2').addEventListener('touchend',function(){
    function1();
    function3();
},false);

如果有人能先解释一下jQuery版本是什么意思，然后指出我用普通js版本有什么错误，我将不胜感激!

[如果您想知道我为什么要这样做，我需要从我正在构建的 phonegap 应用程序中删除 jQuery，以便页面加载速度更快:-)]

Answer 1

您的代码应该可以在任何支持触摸事件 的浏览器/DOM 中运行。我在这里唯一能想到的是您错过了要调用的 DOMContentLoaded 事件，因此尝试获取/查询尚未准备好的元素。

所以你应该把你的代码包装成

document.addEventListener('DOMContentLoaded', function () {
}, false);

当您调用 $(function() {}); 时，jQuery 会自动为您执行此操作。如果你将一个函数传递给 $() 它是 $(document).ready(fnc)

的快捷方式