Chuyển tiếp sự kiện chuột qua các lớp/divs

Question

Có ai biết jQuery hoặc cách JavaScript nguyên bản để bật các sự kiện chuột qua các lớp không? ví dụ. bật liên kết bên dưới div.

giải pháp khác mà không thể sử dụng trong trường hợp của tôi:

• A simple way, mặc dù sử dụng không thực sự hỗ trợ pointer-events (chỉnh sửa như của năm 2017, widely supported)
• An ExtJS solution

Answer 1

Bạn có thể thử sử dụng jquery để thay đổi chỉ mục z của div khi bạn di chuột qua nó, để liên kết tạm thời nằm trên div trong khi di chuột qua div đã nói.

Answer 2

Tôi đã làm điều đó một lần. Đây là mã:

quickDelegate = function(event, target) { 
      var eventCopy = document.createEvent("MouseEvents"); 
      eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, 
       event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey, 
       event.shiftKey, event.metaKey, event.button, event.relatedTarget); 
      target.dispatchEvent(eventCopy); 
      // ... and in webkit I could just dispath the same event without copying it. eh. 
     }; 

xin lưu ý rằng tôi chỉ nhắm mục tiêu các phiên bản mới của Firefox và Chrome.

Answer 3

Hiện nay, một thực jQuery của sự kiện chuyển tiếp kịch bản ExtJS:

JQuery Forward Mouse Event Example

Answer 4

Vì liên kết JQuery Forward Mouse Event Example hiện đã chết, tôi đã viết một số mã jQuery để xử lý một trường hợp đơn giản:

1. lớp phủ div có hình ảnh trong suốt và không có liên kết
2. div lót với các liên kết

Mục tiêu: giữ lớp phủ hiển thị, làm cho liên kết hoạt động và thay đổi con trỏ khi trên liên kết.

Phương pháp: so sánh vị trí chuột với từng liên kết offset().

Tôi không xử lý các sự kiện chuột chung, tôi chỉ xử lý các sự kiện tôi cần đặc biệt. Vì vậy, nó thực sự là một workaround thay vì giải pháp tốt nhất, mà sẽ xử lý mọi sự kiện chuột trừu tượng, một cái gì đó giống như sử dụng WildDeepegate trên() sau khi kiểm tra hình học. Ngoài ra tôi chỉ quan tâm đến các yếu tố liên kết nhất định, không phải toàn bộ lớp DOM.

function mouse_event_over_element(evt, elem) { 
    var o= elem.offset(); 
    var w= elem.width(); 
    var h= elem.height(); 
    return evt.pageX >= o.left && evt.pageX <= o.left + w && evt.pageY >= o.top && evt.pageY <= o.top + h; 
} 

$(overlay_selector).click(function(e){ 
    $(underlay_selector + ' a').each(function() { 
    if (mouse_event_over_element(e, $(this))) { 
     // $(this).click(); // trigger a jQuery click() handler 
     // quickDelegate(e, this); // not in IE8 
     // this.click(); // maybe not in Mozilla pre-HTML5 
     window.location.href= this.href; 
     return false; 
    } 
    }); 
}); 

$(overlay_selector).mousemove(function(e){ 
    var newcursor= 'default'; 
    $(underlay_selector + ' a').each(function() { 
    if (mouse_event_over_element(e, $(this))) { 
     newcursor= 'pointer'; 
     // $(this).mouseenter(); // trigger a one-argument jQuery hover() event (no mouseleave) 
     return false; 
    } 
    }); 
    $(overlay_selector).css('cursor', newcursor); 
}); 

Sử dụng chức năng hình học 'mouse_event_over_element()' bạn có thể xử lý các sự kiện và yếu tố khác.

Để làm: tìm hiểu xem sự kiện chuột nào kích hoạt chú giải công cụ trên <a title="foo"> và kích hoạt() chúng hoặc sao chép hiển thị chú giải công cụ. Tương tự cho dòng trạng thái.

..............................

Sửa 2014/09

.. ............................

tài user2273627 sggested:

Đối với các tooltip mặc định và tình trạng dòng bạn có thể sử dụng z-index css-bất động sản. Kiểm tra xem chuột có nằm trên liên kết hay không và đặt z-index cho liên kết đó. $ (this) .css ('z-index', '9'); Đặt một người khác khi chuột không vượt quá một phần tử và đặt chỉ mục z thành tự động. Đảm bảo bạn đặt vị trí liên kết cơ bản: tương đối trong tệp css, nếu không chỉ mục z sẽ không hoạt động.

Answer 5

jQuery Forward Mouse Event example được cung cấp ở đây là một phần của khuôn khổ lớn hơn và thậm chí chỉ cần tìm ra nhiều trang web nhất định là một công việc vặt.

Do đó, tôi viết lại mã này dưới dạng plugin jQuery độc lập.

Đây là kho Github:
https://github.com/MichaelPote/jquery.forwardevents

Thật không may, mục đích tôi đã sử dụng nó cho - bao phủ một mặt nạ trên Google Maps không chụp nhấp và kéo các sự kiện, và con trỏ chuột không thay đổi đó làm giảm sự trải nghiệm người dùng đủ để tôi chỉ quyết định ẩn mặt nạ trong IE và Opera - hai trình duyệt which dont support pointer events.

Answer 6

Bạn có thể làm tất cả những gì hoặc bạn chỉ có thể sử dụng CSS này cho div rằng:

pointer-events: none