1

我有以下 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，以便页面加载更快:-)]

4

3 回答 3

4

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

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

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

当你调用$(function() {});. 如果您将一个函数传递给$()它的快捷方式$(document).ready(fnc)

于 2012-05-02T11:40:57.453 回答
1

该代码完全按照您的操作，只是将处理程序分开，我认为您遇到的唯一问题是缺少使用

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

这意味着 dom 还没有准备好， getElementById 什么也找不到。

于 2012-05-02T11:41:52.667 回答
0

好的，我在这里阅读了其他几篇文章，这篇文章非常成功。

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);

但是，如果有人可以向我解释流程是什么以及代码是如何工作的，那么我的一天就结束了 :-)

于 2012-05-02T11:39:58.977 回答