Hai differents OnClick trên hai divs, một trên khác

Question

Tôi có hai div, một div lớn và nhỏ hơn nhau, mỗi div có phương pháp OnClick riêng. Vấn đề tôi có là khi tôi nhấp vào div nhỏ hơn, phương pháp OnClick của div lớn được gọi là quá.

Tôi có thể tránh điều đó ở đâu?

Answer 1

Cách tốt nhất để phát hiện yếu tố nào được nhấp là phân tích mục tiêu của sự kiện (sự kiện nhấp). Tôi đã chuẩn bị một ví dụ nhỏ cho trường hợp này. Bạn có thể nhìn thấy nó trong mã dưới đây.

 
function amIclicked(e, element) 
{ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.id==element.id) 
     return true; 
    else 
     return false; 
} 
function oneClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('One is clicked'); 
    } 
} 
function twoClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('Two is clicked'); 
    } 
} 

phương pháp javascript Điều này có thể được gọi trước khi bạn thực hiện kịch bản của bạn

Ví dụ

 
<style> 
#one 
{ 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
#two 
{ 
    width: 50px; 
    height: 70px; 
    background-color: yellow; 
    margin-left: 10; 
    margin-top: 20; 
} 

</style> 



<div id="one" onclick="oneClick(event, this);"> 
    one 
    <div id="two" onclick="twoClick(event, this);"> 
     two 
    </div> 
</div> 

Tôi hy vọng điều này sẽ giúp.

Answer 2

Vấn đề của bạn là sự kiện click sẽ nhân lên cây phần tử. Do đó, mỗi phần tử chứa phần tử được nhấp vào cũng sẽ kích hoạt sự kiện click.

Giải pháp đơn giản nhất là thêm return false trình xử lý của bạn.

Nếu bạn đang sử dụng jQuery, bạn có thể gọi e.stopPropagation(); nếu không, bạn cần phải gọi e.stopPropagation() nếu có, và đặt event.cancelBubble = true.

Để biết thêm thông tin, hãy xem here.

Answer 3

Nếu bạn quyết định sử dụng thư viện javascript như www.jquery.com, bạn có thể dễ dàng hoàn thành những gì bạn đang cố gắng thực hiện bằng cách sử dụng tùy chọn ngăn chặn tuyên truyền.

Answer 4

Điều bạn đang giải quyết là sự kiện sôi nổi. Hãy xem bài viết này: http://www.quirksmode.org/js/events_order.html.

Về cơ bản, để ngăn chặn sự kiện từ đi qua các yếu tố phụ huynh, bạn có thể sử dụng một cái gì đó như thế này:

document.getElementById('foo').onClick = function(e) { 

    // Do your stuff 

    // A cross browser compatible way to stop propagation of the event: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

Answer 5

Bạn đang chạy vào một trường hợp phổ biến tuyên truyền sự kiện. Hãy xem quirksmode.org để biết chi tiết đầy đủ về những gì chính xác đang diễn ra. Về cơ bản, những gì bạn cần làm trong trình xử lý nhấp chuột của div nhỏ hơn là:

if (!e) var e = window.event; 
e.cancelBubble = true; 
if (e.stopPropagation) e.stopPropagation();