Question

我是Jquery自定义事件的新手，只是阅读文档而我决定制作我自己的自定义事件，如下所示：

HTML：

<a href="http://stackoverflow.com/">Hello</a>

JQuery：

$(function () {

    // kabhoom = $.Event('click');  

    $('a').on( 'kabhoom' , function(e){
        console.log(e.target);
        return false;
    })

    $('a').click(function(){
        $(this).trigger('kabhoom');
    })

});

编辑:: 总结一下我在上面代码中的难度，returnfalse不起作用！用户仍然可以导航到a中的链接。

现在这里的glinch是返回false或者preventDefault在这里工作，为什么？

当我将逻辑移到

时，我进行了一些实验

$('a').click(function(){
    $(this).trigger('kabhoom');
    return false;
})

它可以工作，但在我的自定义事件监听器中，我的代码不起作用。谁能告诉我为什么？我对Jquery如何工作更感兴趣，这就是我问这个问题的原因！。

Answer 1

返回退出该返回值的函数。你的preventDefault永远不会到达。

    console.log(e.target); // Log stuff
    return false; // Exit function
    e.preventDefault(); // unreachable

同样在你的第二个代码块中，你从未定义过e。因此即使它会到达e.preventDefault();行，也会失败Uncaught ReferenceError: e is not defined

修改

您需要检查传播是否已停止

＆＃13;
＆＃13;
var content = $('#frut'); $(function () { // kabhoom = $.Event('click'); $('a').on( 'kabhoom' , function(e){ // Are we good to go? Or has it stopped? if(!e.isPropagationStopped()) { content.append("Target = "+e.target+"<BR/>Cancelling Events<br/>"); e.preventDefault(); e.stopPropagation(); e.cancelBubble =true; return false; } }) }); $('a').click(function(e){ content.append('Normal click event<BR/>'); $(this).trigger('kabhoom'); e.preventDefault(); return false; }) // wrapping in ready because otherwise the order is messed up that the event listeners are registered. $(document).ready(function(){ $('a').on( 'kabhoom' , function(e){ // Are we good to go? Or has it stopped? if(!e.isPropagationStopped()) { content.append('Should not appear<BR/>'); } }); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="frut"> </div> <a href="https://www.google.com">KHaboom?</a>
＆＃13;
＆＃13;
＆＃13;

修改2

你的问题归结为：

您的khaboom事件有 NO 方式停止点击传播。 khaboom由trigger命令触发为单独的进程。

它获取了自己的事件流，但与触发它的click事件无关。所以它可以自行取消，它可以防止你定义的任何应该或不应该发生的事情，但它不能触及click事件，因为没有引用它，click事件也不会等待它。

你可以看到它有两个分流，但再也没有碰过。当一条小溪在海洋中结束时，另一条小溪在山中死亡（海洋随处可见）。虽然山中的其他溪流只是山脉的事情（无论你决定在它的khaboom事件上发生什么）。

可视化：

CLICK || || \/ EVENT || || \/ jQuery.on() call all clicks || || \/ click found trigger khaboom=========== <-- absolute seperation. no more link between two threads. || || || || \/ \/ no more click events EVENT || || || || \/ \/ has preventDefault been called? jQuery.on() call all khaboom || || || || \/ \/ No? Navigate to page defined. found khaboom. execute || || \/ has preventDefault been called? || || \/ yes? do nothing because we don't have an end.

返回false不使用自定义事件

1 个答案: