单击正文时如何防止 div 上的 onclick 事件？答案

【问题标题】：How to prevent onclick event on a div while clicking on body click?单击正文时如何防止 div 上的 onclick 事件？
【发布时间】：2017-12-31 08:13:55
【问题描述】：

我想在单击文档上的任何位置时为 body、html 元素执行功能，并且还有一个 div 标签，它是 onclick 事件将在那里。两者在单击该 div 时相互冲突如何防止。尝试了事件停止传播和事件阻止默认值例如： jd不过是jquery

$jd =  jQuery

下面的事件应该只触发特定的 div。但他的事件与 body onclick 发生冲突。

$jd('.menu-left a').click(function(){
            $jd('.menu-left a').removeClass('active');          
            if($jd(this).hasClass('add_item_team')) self.team.create();
            if($jd(this).hasClass('add_item_qrcode')) self.qrcode.open();
            $jd(this).addClass('active');
            jQuery("#text-lock").trigger("click");
        });

jQuery(document).on('click','body',function(event){
/*console.log("adsfasddfs");   

    var finding_span;
    finding_span = $jd(".design-area").find('.content-inner span.drag-item');

     if(event.target.id == "dg-left"){
     return false;
     }else{
        if(finding_span.length>0){

        console.log("cameeeee");
        design.item.unselect();

        }
     }*/
     var finding_span;
    finding_span = $jd(".design-area").find('.content-inner span.drag-item');

     if(finding_span.length>0){
        design.item.unselect();
    }

【问题讨论】：

你想点击一个div而不是body吗？你的问题不清楚
使用 event.preventdefault() 和 stoppropagation() 来防止事件冒泡。检查互联网上的 preventdefault 以获得更多了解
以上代码中的$jd是什么？
看看这个developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
@KARANLAGALWAR jd 只不过是 jquery

标签： javascript jquery

【解决方案1】：

jQuery(document).on('click','body',function(event){
    event.preventDefault();
    event.stopPropagation();
     var finding_span;
    finding_span = $jd(".design-area").find('.content-inner span.drag-item');

     if(finding_span.length>0){
        design.item.unselect();
    }

希望对你有帮助

【讨论】：

【解决方案2】：

试试下面的

   $jd(function(){
       event.preventDefault();
       event.stopPropagation();
       $jd('.menu-left a').click(function(){
       $jd('.menu-left a').removeClass('active');          
        if($jd(this).hasClass('add_item_team')) self.team.create();
        if($jd(this).hasClass('add_item_qrcode')) self.qrcode.open();
        $jd(this).addClass('active');
        jQuery("#text-lock").trigger("click");
     });
   });

【讨论】：

【解决方案3】：

jQuery(document).on('click','html,body,#main',function(event){
 event.preventDefault();
    event.stopPropagation();


    if(event.target.id=="text-lock"){
        return false;

    }

     var finding_span;
    finding_span = $jd(".design-area").find('.content-inner span.drag-item');

     if(finding_span.length>0){
        design.item.unselect();

        jQuery(".add_item_text").css({'background-color':'#f6f6f6','color':'#333'});
    }

【讨论】：