Làm cách nào để chuyển các sự kiện nhấp chuột từ một div này sang div khác?

Question

Tôi cần tìm cách chuyển các sự kiện nhấp chuột từ div trên đầu trang đến div bên dưới nó (và bỏ qua các nhấp chuột trên div cao hơn). Có một cách được biết đến để mô phỏng sự kiện nhấp và chuyển nó đến div khác, nhưng đây không phải là hành vi tự nhiên và tùy chọn ít được mong muốn nhất.

Dường như sự kiện bọt sẽ không giúp đỡ ở đây kể từ khi div trên đầu không được chứa trong hình dưới đây ..

Bất kỳ ý tưởng?

đây là một ví dụ jsfiddle:

http://jsfiddle.net/QKjUx/

Nếu bạn loại bỏ các "overlay" div, bạn có thể nhấp chuột vào một trong các yếu tố này. Trong khi nó ở đó, bạn không thể. Tuy nhiên, có thể chuyển sự kiện tới div bên dưới, vị trí quan trọng - có thể có một liên kết mà tôi muốn người dùng có thể nhấp vào.

Answer 1

thêm tài sản css này để lớp phủ div:

pointer-events: none; 

Bạn có thể đọc thêm về nó tại địa chỉ: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Answer 2

Bạn có thể kích hoạt sự kiện nhấp chuột trên một div, bằng cách nhấp vào một div khác.

Bạn có thể tạo một sự kiện một sự kiện click như

//A function to fire an event 
function eventFire(el, etype){ 
    if (el.fireEvent) { 
     el.fireEvent('on' + etype); 
    } else { 
     var evObj = document.createEvent('cClick'); 
     evObj.initEvent(etype, true, false); 
     el.dispatchEvent(evObj); 
    } 
} 

var div1 = document.getElementByID("firstDiv"); //find the first div 
div1.onClick = function() { //attach a onclick event 
    //Now select the element and fire the event 
    var div2 = document.getElementById("seconddiv"); //select the second div 
    eventFire(div2, 'click'); //fire the click event 
}; 

Answer 3

Bạn có cần cấu trúc div cho làm mục đích? - Tôi nghĩ bạn có thể đặt div đầu tiên của bạn để hiển thị nội tuyến, sau đó thả các div khác bên trong nó để div bên ngoài sau đó sẽ có chiều cao 0 và sau đó bạn có thể nhấp vào từng div riêng lẻ bên trong nó.