如何发送触发事件并知道它是否已被任何接收者取消/使用?

本文介绍了如何发送触发事件并知道它是否已被任何接收者取消/使用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在构建一个自定义导航系统，其中锚链接作为data-url =属性存储在父项中.这样，整个项目都是可点击的(在其他功能中).

I am building a custom navigation system, where the anchor links are store in parent items as data-url = attributes. This way the entire item is clickable (among other features).

我需要这些子项的默认行为是正常处理链接(即，更改window.location).

I need the default behaviour of these child items to be to process the links normally (i.e. change window.location).

问题:我如何从trigger位收件人发回邮件，表明该邮件已被消耗，所以不要继续进行正常处理" ??或者可能只是您如何获得触发器绕过的事件对象?

Q: How can I signal back from triggered recipients that the message was consumed so do not proceed with "normal processing"? Or possibly just how do you get at the event object the trigger passes around?

// Construct the test structure var $panel = $('.panel'); var $items = $panel.find('li:has(a)'); $items.each(function () { var $item = $(this); $item.addClass('item'); var $a = $item.find('a[href]'); $item.attr('data-url', $a.attr('href')).attr('data-target', $a.attr('target')); $a.contents().unwrap(); }); // Test click handler $panel.on('click', '.item', function(e){ var $this = $(this); //alert($this.attr('data-url')); $this.trigger('navigate', [$this.attr('data-url'), $this.attr('data-target')]); // Q: How to know if a receiving item consumed the click??? if ("some test goes here"){ // Navigate like normal link window.location = $this.attr('data-url'); } }); // Test parent control click handler // e.g. only wants events targetted at ".content" $(document).on('navigate', function(e, url, target){ alert(" url='" + url + "' target= \'" + target + "'"); // Process .content targetted links here and not at source if (target == '.content'){ e.preventDefault(); // or something else? } });

示例HTML

<div class="panel"> <ul> <li> <a href="link1.html" target=".content">Link1</a> </li> <li> <a href="link2.html" target=".other1">Link1</a> </li> </ul> </div> <div class="panel"> <ul> <li> <a href="link3.html" target=".content">Link1</a> </li> <li> <a href="link4.html" target=".other1">Link1</a> </li> </ul> </div> <div class="content"></div> <div class="other"></div>

我想使用e.preventdefault()之类的标准，但是如何从调用trigger的位置访问事件对象?

I would like to use something standard like e.preventdefault(), but how do you access the event object from where you call trigger?

推荐答案

文档...啊！

实际上它相当简单，但仅在此页面中提及 api.jquery/category/events/event-object/，而不是在trigger参考页上:

Documentation... Argh!

It actually turns out to be reasonably simple but is only mentioned on this page api.jquery/category/events/event-object/ and not on trigger reference page:

自己创建一个事件对象，并将其传递给触发器！" :)

var e = jQuery.Event( "navigate" ); $this.trigger(e, [$this.attr('data-url'), $this.attr('data-target')]); if (e.isDefaultPrevented()) { // Someone prevented the default event! alert('Prevented!'); } else { alert('Navigated!'); // Navigate like normal link //window.location = $this.attr('data-url'); }

改进版本:

您还可以简单地扩展jQuery事件对象(而不是传递参数).

Improved version:

You can also simply extend the jQuery event object (instead of passing parameters).

var e = jQuery.Event( "navigate", {url: $this.attr('data-url'), navtarget: $this.attr('data-target')} ); $this.trigger(e);

并引用自定义事件参数:

and reference custom event parameters instead:

$(document).on('navigate', function (e) { alert(" url='" + e.url + "' target= \'" + e.navtarget + "'"); // Process .content targetted links here and not at source if (e.navtarget == '.content') { e.preventDefault(); // or something else? } });

好得多，现在看起来好像是内置.您只需要避免使用任何现有的属性名称(在我意识到它是现有的非常重要属性之前，我曾使用target作为自定义项):)

Much nicer and now looks like it was built in. You just have to avoid any existing property names (I used target as a custom before I realized it was an existing, rather important property) :)