Question

我被问到div中的任何地方点击都会执行特定操作（比如折叠），除非点击是在链接，按钮等上...

基本上，我想要与event.preventDefault()相反。

有没有一种简单易行的方法？

我在这里寻找通用解决方案;我不想对div的内容做太多假设。

可能看起来像：

<div id="click_me>
<p>Clicking here should do stuff
   <a href="http://stackoverflow.com">but not here, nor on the following image</a>
   <a href="/xyz"><img url="/icon.png"/></a>
   imagine buttons... input areas, ...
</p>
</div>

使用以下Javascript：

$("#click_me").click(function(){
  if(black_magic) {
    $("#click_me").toggleClass("collapsed");
  }
});

Answer 1

您只需确保事件target不是链接，也不是按钮。

$('#click_me').click(function(e) {
  interactive = 'a, button, input, textarea, video, map, object';
  if($(event.target).closest(interactive).length == 0) ) {
    $("#click_me").toggleClass("collapsed");
  }
});

Answer 2

只需将此处理程序添加到您的链接：

$("#click_me a,button,input,textarea,video,map,object").click(function(e){
   e.stopPropagation();
});

防止事件进入div（冒泡）。它将停止，以便链接正常运行。

See it in action.（点击预览）

Answer 3

Event bubbling是此处的关键字。将事件处理程序绑定到div并检查event target以指定要执行的操作。

$('div.mydivclass').bind('click', function(event){
    switch(event.target.id){
        case 'id_of_an_anchor':{
              alert('anchor was clicked');
              break;
        }
        case 'id_of_a_span':{
              alert('span was clicked');
              break;
        }
        default: {
              alert('something else was clicked within me');
        }
    }
});

当然，您甚至可以检查目标tagName或nodeType。

Answer 4

function onClick(e){
    var gates = "A,INPUT,TEXTAREA,SELECT";
    var bound = this;
    var isCollapse = function ( node ){ 
    if( node == bound ){ return true; }
        var re = new RegExp( "\\b" +node.nodeName+ "\\b", "g" );
        return re.test( gates ) ? false : isCollapse( node.parentNode );
    };

    if( isCollapse( event.srcElement || e.target ) ){
        alert( "collapse" )
        // collapse()
    }
}
document.getElementById("click_me").onclick = onClick;

*已固定* 适用于以下情况：<a href="_"><span><strike> a link </strike></span></a>

只有在Javascript / jQuery中没有默认值时才能执行操作？

4 个答案: