Question

美好的一天，我有这个任务要做：

有很多很多网页，里面有任何类型的元素，应该是输入，按钮，链接，复选框等等，有时候应该有一个可以处理元素行为的javascript，有时它很简单<a href="...">...</a>链接。

我制作了一个小javascript来拦截可点击元素的所有点击：

$( document ).ready(function() {
    $('input[type=button], input[type=submit], input[type=checkbox], button, a').bind('click', function(evt, check) {

        if (typeof check == 'undefined'){
            evt.preventDefault();
                console.log("id:"+ evt.target.id+", class:"+evt.target.class+", name:"+evt.target.name);
                console.log (check);            
            $(evt.target).trigger('click', 'check');
        }
    });
});

逻辑是：当某些内容被点击时，我拦截它，阻止默认它，进行我的跟踪调用，然后通过触发带有附加参数的事件来重新点击该点击，该附加参数不会再次触发跟踪调用。

但这不是很好。提交点击接缝工作，但是例如点击一个复选框将检查它，但是然后它不能被取消选中，链接被简单地忽略，我跟踪它们（在console.log（）中）然后页面停留在那里，没有任何反应。

也许我猜错了...也许我应该拨打跟踪电话，然后将return true与(//...track call...//).done(return true);之类的东西绑定......

任何人都有一些建议吗？

Answer 1

如果你真的想等到点击事件，直到完成跟踪调用，你可能会做这样的事情。这是链接的示例，但对于其他元素应该是相同的。此示例中的click事件在2秒后触发，但在您的情况下，link.click()将位于ajax对象的done()方法中。

<a href="http://www.google.com" id="myl">google</a>

var handled = {};
$("#myl").on('click', function(e) {
   var link = $(this)[0];
   if(!handled[link['id']]) {
      handled[link['id']] = true;
      e.preventDefault();
      e.stopPropagation();
      //simulate async ajax call
      window.setTimeout(function() {link.click();}, 2000);
   } else {
      //reset
      handled[link['id']] = false;
   }
});

修改

因此，对于您的示例，这看起来像这样

var handled = {}; $( document ).ready(function() { $('input[type=button], input[type=submit], input[type=checkbox], button, a').bind('click', function(evt) { if(!handled[evt.target.id]) { handled[evt.target.id] = true; evt.preventDefault(); evt.stopPropagation(); $.ajax({ url: 'your URL', data: {"id" : evt.target.id, "class": evt.target.class, "name": evt.target.name}, done: function() { evt.target.click(); } }); } else { handled[evt.target.id] = false; } });

拦截点击，进行一些调用，然后恢复点击之前应该完成的操作

1 个答案: