如何发送触发事件并知道它是否已被任何接收者取消/使用? [英] How to send trigger event and know if it was cancelled/consumed by any recipient?

问题描述

我正在构建一个自定义导航系统，其中锚链接作为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?

推荐答案

文档...啊！

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

Documentation... Argh!

It actually turns out to be reasonably simple but is only mentioned on this page http://api.jquery.com/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) :)

这篇关于如何发送触发事件并知道它是否已被任何接收者取消/使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！