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)

的快捷方式

Answer 2

代码完全符合你的要求，只是让处理程序分开，我认为你唯一的麻烦就是缺乏使用

document.addEventListener('DOMContentLoaded', function () {

这意味着dom没有准备好，getElementById也找不到任何东西。

Answer 3

好的，我在这里看了很少的其他帖子，而且这个帖子几乎已经钉了它。

document.addEventListener('DOMContentLoaded', function () {
                      var div1 = document.getElementById('div1');
                      var div2 = document.getElementById('div2');
                      // event handler
                      var handler = function (event) {
                        function1();
                        function2();
                      };
                      var handler2 = function(event) {
                        function1();
                        function3();
                      };
                      // Bind the events
                      div1.addEventListener('touchend', handler, false);
                      div2.addEventListener('touchend',handler2,false);
                      }, false);

但如果有人可以解释我的流程是什么以及代码如何运作，我的日子就是： - ）

用于jQuery代码的简单JS版本

3 个答案: