jQuery e.target 冒泡最佳实践？

发布于 2024-10-09 06:36:09 字数 839 浏览 10 评论 0原文

在我的重型 ajax 代码中，我总是绑定“单击”body 标记和行为取决于 $(e.target) &使用$.fn.hasClass()。但是，当我单击内部有标记的锚点时，我的 $(e.target) 等于此节点，而不是我的父锚点想要它。

从现在开始，我已经使用了这个技巧 (var $t = $(e.target);) ：

/** bubbling **/
if($t.get(0).tagName !== "A" && $t.get(0).tagName !== "AREA") {
    $t = $t.parent("a");
   if(empty($t)) return true;
   //else console.log("$t.bubble()", $t);
}

不知何故感觉不对......你有更好的实现吗？

$.fn.live() 没有解决我的问题，因为它仍然返回跨度作为目标。此外，我正在寻找速度（在基于原子的触摸设备上运行）和速度（在基于原子的触摸设备上运行）。 live 似乎慢得多（两次）： http://jsperf.com/bind-vs-click /3

事实上，正如 @Guffa 指出的那样，使用 $.fn.live() 解决了跨度冒泡问题，因为我不需要 event.target 不再了。我想这里没有其他“正确”的答案（在容器上使用绑定）。

原文

In my heavy-ajax code, i always bind "click" the body tag & act depending on $(e.target) & using $.fn.hasClass(). However when i click on an anchor that has a </span> tag inside, my $(e.target) equals this node, and not the parent anchor as i would like it to.

From now on, i have used this trick (var $t = $(e.target);) :

/** bubbling **/
if($t.get(0).tagName !== "A" && $t.get(0).tagName !== "AREA") {
    $t = $t.parent("a");
   if(empty($t)) return true;
   //else console.log("$t.bubble()", $t);
}

It feels wrong somehow... Do you have any better implementation ?

$.fn.live() does not solve my issue as it still returns the span as the target. Moreover i'm looking for speed (running on atom-based touch devices) & live appeared to be way slower (twice) : http://jsperf.com/bind-vs-click/3

In fact, as @Guffa pointed, using $.fn.live() solves the span bubbling issue as i don't need the event.target anymore. I guess there is no other "right" answer here (using bind on a container).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙沙粒小 2024-10-16 06:36:09

为什么不使用为您完成此操作的 live 方法呢？

$('a.someclass').live('click', function(){
  // do something
});

live 方法绑定到 body 元素并根据选择器检查事件目标。

jQuery：实时

Why not use the live method that does it for you?

$('a.someclass').live('click', function(){
  // do something
});

The live method binds to the body element and checks the event target against the selector.

jQuery: live

回复收藏 0 原文

笛声青案梦长安 2024-10-16 06:36:09

closest 在这里很有用（尽管其他方法 - live< /code> 和 delegate — 如下所述）：

$t = $t.closest('a');

从 $t 开始，向上遍历父元素链，直到找到与给定选择器匹配的元素。 — 在本例中为“a”。

这是一个基本示例：

HTML:

<a href='#'><span>Outer span <span>inner span <em>em</em></span></span></a>

JavaScript using jQuery:

jQuery(function($) {

  $(document).click(function(e) {
    var $t = $(e.target).closest('a');
    $t.css("border", "1px solid black");
    return false;
  });

});

Live copy

单击链接会在链接周围放置边框，无论您单击其中一个跨度还是 em 元素或任何位置。

有点离题，但 jQuery 的最新版本通过 live （它基本上执行您所做的操作，将事件挂接到主体上，然后查看它发生在哪个实际元素上，将选择器应用于元素匹配）和 delegate （与 live 相同，但植根于特定元素而不是文档本身）。

closest is useful here (though other methods — live and delegate — are described below):

$t = $t.closest('a');

That starts with $t and works upward through the chain of parent elements until it finds one matching the given selector — "a" in this case.

Here's a rudimentary example:

HTML:

<a href='#'><span>Outer span <span>inner span <em>em</em></span></span></a>

JavaScript using jQuery:

jQuery(function($) {

  $(document).click(function(e) {
    var $t = $(e.target).closest('a');
    $t.css("border", "1px solid black");
    return false;
  });

});

Live copy

Clicking the link puts a border around the link, whether you click in one of the spans or the em element or wherever.

Somewhat off-topic, but recent versions of jQuery handle this for you via live (which basically does what you do, hooks an event on the body and then looks to see what actual element it happened on, applying a selector to element matching) and delegate (same as live but rooted in a specific element instead of the document itself).

回复收藏 0 原文