ฉันจะป้องกันไม่ให้เหตุการณ์ onclick ของผู้ปกครองยิงเมื่อผู้ประกาศข่าวเด็กถูกคลิกได้อย่างไร

ฉันกำลังใช้ jQuery เพื่อให้สามารถคลิก div ได้และใน div นี้ฉันยังมีเบรก ปัญหาที่ฉันพบคือเมื่อฉันคลิกที่จุดยึดทั้งเหตุการณ์การคลิกกำลังเริ่มทำงาน (สำหรับ div และตัวยึด) ฉันจะป้องกันไม่ให้เหตุการณ์ onclick ของ div ไม่ทำงานเมื่อคลิกสมอ

นี่คือรหัสที่ใช้ไม่ได้:

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

เหตุการณ์ฟองสบู่ถึงจุดสูงสุดใน DOM ที่แนบเหตุการณ์การคลิก ดังนั้นในตัวอย่างของคุณแม้ว่าคุณจะไม่มีองค์ประกอบอื่น ๆ ที่สามารถคลิกได้อย่างชัดเจนใน div องค์ประกอบย่อย ๆ ของ div จะทำให้เหตุการณ์การคลิกของพวกเขาเพิ่มขึ้นเป็น DOM จนกระทั่งตัวจัดการเหตุการณ์คลิกของ DIV จับได้

มีสองวิธีในการแก้ไขปัญหานี้คือการตรวจสอบว่าใครเป็นผู้สร้างเหตุการณ์จริง jQuery ส่งผ่านวัตถุ eventargs พร้อมกับเหตุการณ์:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

คุณยังสามารถแนบตัวจัดการเหตุการณ์คลิกไปยังลิงก์ของคุณซึ่งบอกให้พวกเขาหยุดเหตุการณ์เดือดดาลหลังจากตัวจัดการดำเนินการด้วยตนเอง:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

ใช้เมธอดstopPropagationดูตัวอย่าง:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

ดังที่ได้กล่าวไว้โดย jQuery Docs:

stopPropagation วิธีการป้องกันเหตุการณ์จากการเดือดปุด ๆ ขึ้นต้นไม้ DOM ป้องกันไม่ให้ตัวจัดการผู้ปกครองใด ๆ จากการได้รับแจ้งของเหตุการณ์

โปรดทราบว่ามันไม่ได้ป้องกันผู้ฟังคนอื่น ๆ ที่จะจัดการกับเหตุการณ์นี้ (เช่นตัวจัดการคลิกมากกว่าหนึ่งปุ่ม) ถ้ามันไม่ใช่เอฟเฟกต์ที่ต้องการคุณต้องใช้stopImmediatePropagationแทน

นี่คือทางออกของฉันสำหรับทุกคนที่นั่นมองหารหัสที่ไม่ใช่ jQuery (pure javascript)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

รหัสของคุณจะไม่ถูกประหารหากคลิกที่ลูกของผู้ปกครอง

คุณสามารถลองสิ่งนี้ได้

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

หากคุณไม่ต้องการโต้ตอบกับองค์ประกอบภายใน / ในกรณีใด ๆ โซลูชัน CSS อาจเป็นประโยชน์สำหรับคุณ

เพียงตั้งองค์ประกอบภายใน / s เป็น pointer-events: none

ในกรณีของคุณ:

.clickable > a {
    pointer-events: none;
}

หรือกำหนดเป้าหมายองค์ประกอบภายในทั้งหมดโดยทั่วไป:

.clickable * {
    pointer-events: none;
}

แฮ็คที่ง่ายนี้ช่วยฉันประหยัดเวลาได้มากในขณะที่พัฒนาด้วย ReactJS

พบการสนับสนุนเบราว์เซอร์ที่นี่: http://caniuse.com/#feat=pointer-events

หากคุณมีหลายองค์ประกอบใน div ที่คลิกได้คุณควรทำสิ่งนี้:

$('#clickable *').click(function(e){ e.stopPropagation(); });

การใช้return false;หรือe.stopPropogation();ไม่อนุญาตให้ใช้รหัสเพิ่มเติมเพื่อดำเนินการ มันจะหยุดไหลที่จุดนี้เอง

เขียนถ้าใครต้องการ (ทำงานให้ฉัน):

event.stopImmediatePropagation()

จากนี้การแก้ปัญหา

ทางเลือกแบบอินไลน์:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

นี่คือตัวอย่างการใช้ Angular 2+

ตัวอย่างเช่นหากคุณต้องการปิด Modal Component หากผู้ใช้คลิกที่ด้านนอก:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

คุณต้องหยุดกิจกรรมจากการเข้าถึง (เดือดดาล) ผู้ปกครอง (div) ดูส่วนที่เกี่ยวกับเดือดปุด ๆที่นี่และข้อมูล API jQuery เฉพาะที่นี่

ในการระบุองค์ประกอบย่อยที่ไม่สามารถคลิกได้ให้เขียนลำดับชั้นของ css ดังตัวอย่างด้านล่าง

ในตัวอย่างนี้ฉันหยุดการเผยแพร่ไปยังองค์ประกอบใด ๆ (*) ภายใน td ภายใน tr ภายในตารางที่มีคลาส ".subtable"

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

ละเว้นParent ()เป็นโซลูชัน JavaScript ที่แท้จริง

มันทำหน้าที่เป็นตัวกลางเลเยอร์ที่เปรียบเทียบพิกัดของการคลิกเมาส์กับพิกัดขององค์ประกอบย่อย / s สองขั้นตอนการติดตั้งง่าย:

1ใส่โค้ด ignParent () บนหน้าของคุณ

2.แทนที่จะเป็นต้นฉบับของผู้ปกครองonclick = "parentEvent ();" เขียน:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

คุณสามารถส่ง ID ขององค์ประกอบลูกจำนวนใดก็ได้ไปยังฟังก์ชั่นและไม่รวมองค์ประกอบอื่น ๆ

หากคุณคลิกที่องค์ประกอบย่อยหนึ่งรายการกิจกรรมหลักจะไม่เริ่มทำงาน หากคุณคลิกที่ผู้ปกครอง แต่ไม่ได้อยู่ในองค์ประกอบลูกใด ๆ [ให้เป็นข้อโต้แย้ง] เหตุการณ์ผู้ปกครองจะถูกยิง

โค้ด ignParent () บน Github

หากอยู่ในบริบทอินไลน์ใน HTML ลองนี้:

onclick="functionCall();event.stopPropagation();

ในกรณีที่มีคนใช้ปัญหานี้โดยใช้ React นี่คือวิธีที่ฉันแก้ไข

SCSS:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

การแสดงผลของส่วนประกอบ ():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

โดยการเพิ่มฟังก์ชั่น onClick สำหรับเหตุการณ์การคลิกเมาส์ลูกโมดอล (เนื้อหา div) ถูกป้องกันไม่ให้เข้าถึงฟังก์ชั่น 'closeLogin' ขององค์ประกอบหลัก

นี่เป็นกลอุบายสำหรับฉันและฉันก็สามารถสร้างเอฟเฟกต์แบบโมดัลด้วย 2 div ง่าย ๆ

เพิ่มaดังนี้:

<a href="http://foo.com" onclick="return false;">....</a>

หรือreturn false;จากตัวจัดการคลิกเพื่อกด#clickablelike:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

โซลูชันทั้งหมดมีความซับซ้อนและของ jscript นี่คือเวอร์ชั่นที่ง่ายที่สุด:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>