获取 jQuery 单击、上下文（this）以输出单个对象，而不是多个

发布于 2025-01-02 07:34:02 字数 530 浏览 5 评论 0原文

所以我这样做：

    $('.divs').bind('click', function()
    {
         console.log("clicked " +$(this).text());
    }

On：

    <DIV class="divs" id="parent1">Dad
      <DIV class="divs" id="child1">Kid1</DIV>
      <DIV class="divs" id="child2">Kid2</DIV>
    </DIV>

然后，当我单击 child1 时，我会得到多个输出，例如：

“clicked Kid1”

“clicked DadKid1Kid2”

控制台上的

只有当我单击“最父级”div 时，我才会得到单个输出。这一切都很合乎逻辑，但我只想选择“最孩子气”的那个？

原文

So I do:

    $('.divs').bind('click', function()
    {
         console.log("clicked " +$(this).text());
    }

On:

    <DIV class="divs" id="parent1">Dad
      <DIV class="divs" id="child1">Kid1</DIV>
      <DIV class="divs" id="child2">Kid2</DIV>
    </DIV>

Then I get multiple outputs when I click on child1, like:

"clicked Kid1"

"clicked DadKid1Kid2"

on my console

Only when I click on the 'most parent' div i get a single output.
This is all pretty logical, but I'd like to only select the 'most child'-ish one only?

分享到QQ

分享到微博

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

发布评论

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

若有似无的小暗淡 2025-01-09 07:34:02

使用event.stopPropagation停止点击事件的传播。

$('.divs').bind('click', function(event)
{
     event.stopPropagation();
     console.log("clicked " +$(this).text());
});

请注意，我添加了 event 作为事件处理程序匿名函数的参数。

当您单击一个元素时，它会触发一个单击事件，然后该事件将 DOM 一直冒泡到 document 元素，从而触发从原始目标到 的每个祖先元素上的单击事件文档 元素。但是我们可以停止此事件传播。

您还可以返回 false;，这在 jQuery 事件处理程序中将 event.preventDefault() 和 event.stopPropagation()。

$('.divs').bind('click', function()
{
     console.log("clicked " +$(this).text()); 
     return false;
});

给你的一些文档：

event.stopPropagation(): http://api.jquery .com/event.stoppropagation
event.preventDefault(): http://api.jquery.com/event.preventdefault

这是一个演示： http://jsfiddle.net/P5tXP/

Stop the propagation of the click event by using event.stopPropagation.

$('.divs').bind('click', function(event)
{
     event.stopPropagation();
     console.log("clicked " +$(this).text());
});

Notice I added event as an argument for the event handler anonymous function.

When you click an element it fires a click event, then that event bubbles up the DOM all the way to the document element, triggering a click event on each ancestor element from the original target to the document element. We can stop this event propagation however.

You can also return false; which in a jQuery Event Handler will event.preventDefault() and event.stopPropagation().

$('.divs').bind('click', function()
{
     console.log("clicked " +$(this).text()); 
     return false;
});

Some documentation for ya:

event.stopPropagation(): http://api.jquery.com/event.stoppropagation
event.preventDefault(): http://api.jquery.com/event.preventdefault

Here is a demo: http://jsfiddle.net/P5tXP/

回复收藏 0 原文

A君 2025-01-09 07:34:02

你可以浏览这个网站
javascript go 中的http://www.quirksmode.org/js/events_order.html

事件通过 3 个阶段捕获、目标和冒泡..

如果您只想处理目标
你可以做这样的事情

function handler(event){

  event.stopPropagation(); //cancel bubble for IE ,stops bubbling phase

  ele = event.target | event.srcElement;

  if(ele.id == "child1"){
     // your code
  }
}


you can also try using currentTarget and this in handler ..

you can go through this site
http://www.quirksmode.org/js/events_order.html

events in javascript go through 3 phases capturing,at target and bubbling..

if you want to handle only at at target
you can do something like this

function handler(event){

  event.stopPropagation(); //cancel bubble for IE ,stops bubbling phase

  ele = event.target | event.srcElement;

  if(ele.id == "child1"){
     // your code
  }
}


you can also try using currentTarget and this in handler ..

回复收藏 0 原文

~没有更多了~