我可以期待在jQuery中的点击功能

Can I anticipate an on click function in jQuery?

本文关键字：功能 期待 jQuery 我可以      更新时间：2023-09-26

我有这个问题

我有一些元素，实际上是<li>元素，对于这些元素，我对它们进行了一个操作，很容易做到，像这样:

$('.panelTabs li').on('click', function () {
  // ..some operation that change some tab associated to the list
});

然后在我的代码中，我需要应用另一个点击操作，必须检查我是否可以执行前一个操作。

$('.panelTabs li').on('click', function (ev) {
  // ..some operation that makes some check
  if(bActiveRequests === 0){
    ev.stopPropagation();
  }
});

但是第一个函数是在包含检查的第二个函数之前应用的，所以当然我的stopPropagation()不能工作，因为它是在之后执行的。

所以我问是否有一种方法可以在函数已经应用于同一元素之前添加预期的单击函数。

  • 我考虑将该函数保存在一个变量中，然后从li中删除该函数，然后添加我的函数，然后添加前一个函数…但这有点棘手，一点也不好。

  • 我可以在第一个JavaScript文件之前包含第二个JavaScript文件。但由于代码的原因，这也有点棘手。

任何想法?

您至少可以使用两种方法来完成此操作(我相信其他人可能会提出更多方法)。

首先，您可以使用setTimeout来延迟第二次单击，并在第一次单击发生之前执行验证。

下面是一个例子:

var shouldCancel = false;
//First event
//Without the setTimeout, this event would be triggered first.
$("#button1").click(function (e) {
    setTimeout(function () {
        if (!shouldCancel) {
            alert("test2");
        } // end if
    }, 500);
});
//Second event
$("#button1").click(function (e) {
    //Perform validation checks here...
    alert("test1");
    shouldCancel = true;
    e.stopPropagation();
    e.preventDefault();
});

另一种选择(我的偏好和不那么黑客)是使用"验证"方法，将检查作为单击的一部分。

$("#button2").click(function (e) {
    // ..some operation that makes some check and assigns a value to the "shouldCancel" property below
    $(document).trigger("should-continue", {
        shouldBeCanceled: shouldCancel,
        callback: function () {
            alert("test2");
        }
    });
});
$(document).bind("should-continue", function (e, data) {
    if (data.shouldBeCanceled) {
        e.stopPropagation();
        e.preventDefault();
        return;
    } else {
        alert("test1");
        data.callback(); // Call the method specified by the caller
    } // end if/else
});

下面是一个演示这两个方法的JSFiddle: http://jsfiddle.net/xDaevax/3ucby35x/

下面是一些在JS中处理事件的有用链接:

  • http://javascript.info/tutorial/events-and-timing-depth
  • 确保jQuery事件处理程序的执行顺序
  • JavaScript事件处理程序执行顺序
  • http://www.quirksmode.org/js/events_advanced.html

只需将选择语句放入原始的单击处理程序中:

$('.panelTabs li').on('click', function () {
    // ..some operation that makes some check
    if(bActiveRequests === 0){
        // ..some operation that change some tab associated to the list
    }
});

我想到的另一个解决方案是添加一个类disabled <li>元素时，操作应该被触发。一旦需要重新激活它，我将从<li>中删除该类。

在一般设置中，我可以检查这个类，如果它存在，那么它将停止操作。

$('.panelTabs li').on('click', function () {
  if($(this).hasClass('disabled')){
    ev.stopPropagation();
  }
});
相关文章：