Question

我有一个包含许多子span元素的父锚链接。当用户单击跨度时，我执行不同的操作。

目前，我简单地关闭默认点击行为，然后绑定我的自定义点击。如何将其合并为一个单击功能？或者是正确的处理方式？

<a href='http://www.test.com' target='_blank'><span>Link</span> other non clickable text</a>

// Bind menu items
$('a').each(function () {
  var $item = $(this);

  // Turn off default click
  $item.click(function(){
    return false;
  });

  // Click label text
  $item.children('span').eq(0).click(function(e){
    e.preventDefault();
    e.stopPropagation();
    if($item.attr("href")) {
      //window.location = '//' + $item.attr("href");
      alert('window.location');
    }  
  });

}); // each

http://jsbin.com/oFeMIPI/2/?html,js,output

Answer 1

使用委托事件的另一种方法

$('a').on("click","span",function(e){
    //this now refers to the clicked span
    //do your logic here.

    return false;
});

Answer 2

认为你可能在思考它，只需这样做：

$("a span").click(function(e) {
    e.stopPropagation(); //Stop bubbling
    e.preventDefault(); //Dont execute default link behavior

    //Log stuff that you need!
    console.log("Link: " + $(this).parent().attr("href"));
    console.log("Span Text: " + $(this).text());
});

演示：http://jsfiddle.net/Dhne7/

Answer 3

尝试

$('a').click(function(e){
    var $item = $(this), $target = $(e.target);

    if($target.is('span')){
        console.log($item.attr('href'))
    }


    return false;
})

演示：Fiddle

jquery点击检测目标孩子

3 个答案: