Phát hiện nhấp chuột bên ngoài div bằng cách sử dụng javascript

Question

Tôi muốn phát hiện nhấp chuột bên trong hoặc bên ngoài khu vực div. Phần phức tạp là div sẽ chứa các phần tử khác và nếu một trong các phần tử bên trong div được nhấp vào, nó sẽ được coi là một nhấp chuột bên trong, giống như cách một phần tử từ bên ngoài div được nhấp vào, nó phải được xem là bên ngoài nhấp chuột.

Tôi đã nghiên cứu rất nhiều nhưng tất cả những gì tôi có thể tìm thấy là các ví dụ trong jquery và tôi cần javascript thuần túy.

Mọi đề xuất sẽ được đánh giá cao.

Answer 1

Nó phụ thuộc vào các trường hợp sử dụng cá nhân nhưng nó có vẻ giống như trong ví dụ này có thể sẽ là yếu tố lồng nhau khác bên trong chính div ví dụ nhiều divs, danh sách vv Sử dụng Node.contains sẽ là một cách hữu ích để kiểm tra xem phần tử đích có nằm trong div đang được kiểm tra hay không.

window.addEventListener('click', function(e){ 
    if (document.getElementById('clickbox').contains(e.target)){ 
    // Clicked in box 
    } else{ 
    // Clicked outside the box 
    } 
}); 

Ví dụ có danh sách lồng nhau bên trong là here.

Answer 2

Bạn có thể kiểm tra xem phần tử nhấp là div bạn muốn kiểm tra hay không:

document.getElementById('outer-container').onclick = function(e) { 
    if(e.target != document.getElementById('content-area')) { 
     console.log('You clicked outside'); 
    } else { 
     console.log('You clicked inside'); 
    } 
} 

Đề cập đến Here.

Answer 3

bạn có thể áp dụng nếu kiểm tra cho rằng bên trong bạn sự kiện click

if(event.target.parentElement.id == 'yourID') 

Answer 4

Hãy thử giải pháp này nó sử dụng tinh khiết javascript và nó giải quyết vấn đề của bạn. Tôi đã thêm css chỉ để xem tổng quan tốt hơn ... nhưng không cần thiết.

document.getElementById('outer-div').addEventListener('click', function(){ 
 
    alert('clicked outer div...'); 
 
}); 
 

 
document.getElementById('inner-div').addEventListener('click', function(e){ 
 
    e.stopPropagation() 
 
    alert('clicked inner div...'); 
 
});

#outer-div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    background: black; 
 
} 
 

 
#inner-div{ 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    background: red; 
 
}

<div id="outer-div"> 
 
    <div id="inner-div"> 
 
    </div> 
 
</div>

Answer 5

Tôi đã tìm ra một bản hack cho điều này có hiệu quả đối với tôi và điều đó có thể giúp đỡ người khác.

Khi tôi bật hộp thoại DIV, tôi đồng thời hiển thị một DIV trong suốt khác ngay sau nó, bao phủ toàn bộ màn hình.

Nền ẩn này DIV đóng hộp thoại DIV onClick.

Điều này khá đơn giản, vì vậy tôi sẽ không bận tâm với mã ở đây. LMK trong các ý kiến ​​nếu bạn muốn xem nó và tôi sẽ thêm nó vào.

HTH!