Question

我们使用jQuery为DOM元素附加我们的事件处理程序

1）直接 -

    $(#elemId).bind("click",function(){ …//event handler code}); OR

2）代表团。 -

         $(document).delegate("#elemId","click",function(){ …//event handler code});

我们也遇到了一个问题，我们需要从代码中手动执行这些附加的事件处理程序。为此，我们可以使用其中之一。元素中jQuery的.trigger（）API。

       $(#elemId).trigger("click")

在某些情况下，我们只想执行我们附加的事件处理程序，但我们不想执行与该事件关联的默认操作。我们可以通过在元素

上的jQuery中使用.triggerHandler（）API来实现这一点

$(#elemId).triggerHandler("click");

e.g。我们可以在“复选框”列表中附加“click”事件，并且当选中/取消选中任何复选框时，我们可以执行事件处理程序。这里复选框的click事件的默认操作是选中该复选框/uncehcked（即复选框的状态更改。）所以。在某些情况下，我们可能不希望在单击时更改复选框的状态，但我们希望在事件处理程序中执行代码。正如所解释的那样，这可以通过调用.triggerHandler（）而不是.trigger在jQuery中实现。（）解雇事件。

但是，当我们通过委托将事件附加到DOM元素时，这不起作用。在事件委托的情况下执行事件处理程序而不执行默认操作的另一种方法是什么？

请检查以下JSfiddles的区别：直接事件处理：

       http://jsfiddle.net/g2TWh/7/

用于委派事件处理：

        http://jsfiddle.net/g2TWh/8/

（请注意，单击“运行”时不会出现事件处理函数中的警报）

Answer 1

根据JQuery API：

使用.triggerHandler（）创建的事件不会冒泡DOM层次结构;如果它们没有直接由目标元素处理，它们什么都不做。

由于您使用事件委派，因此事件无法冒泡到假设处理事件的文档

另一种方法是添加自定义事件并在其处理程序中使用event.preventDefault（）：

    //attach an event "click" by delegation
$(document).on("customevent", "#childinput1", function (e) {
    e.preventDefault();
    alert('in delegated  "custom" event handler');
});
$(document).on("click", "#childinput1", function (e) {
    alert('in delegated  "click" event handler');
});
testTrigger();

function testTrigger() {
    $("#childinput1").trigger("customevent");
}

Fiddle

顺便说一句，如果你使用jquery 1.7+，你应该使用＆＃34; $。on＆＃34;而不是＆＃34; $。委托＆＃34;：

从jQuery 1.7开始，.delegate（）已被.on（）方法取代。然而，对于早期版本，它仍然是最有效的手段使用事件委托。

Answer 2

当我遇到相同的情况时，我发现的一个解决方案是检查事件是否被触发，如果是，则阻止默认操作。这种方式而不是触发处理程序（如上所述，这是不可能的委托），您可以触发完整事件，并根据事件属性调整操作。以此为例：

//attach an event "click" by delegation
$(document).delegate("#childinput1", "click.test", function (e) {
    // prevent default if this event was triggered
    if (!!e.isTrigger) {
     e.preventDefault();   
    }
    alert('in delegated  "click" event handler');
});
testTrigger();

function testTrigger() {
    $("#childinput1").trigger("click.test");
}

这是修改过的JSFiddle：http://jsfiddle.net/x9d9yjtv/

如何使用.triggerhandler捕获委托事件

2 个答案: