thay thế thuộc tính css 'con trỏ sự kiện' cho IE

Tôi có một menu điều hướng thả xuống trong đó một số tiêu đề không nên điều hướng đến trang khác khi được nhấp (những tiêu đề này mở menu thả xuống khi nhấp vào) trong khi những cái khác nên điều hướng (những cái này không có thả xuống và điều hướng trực tiếp). loại đã hrefđịnh nghĩa cho họ

Để giải quyết điều này tôi đã thêm css sau cho loại tiêu đề cũ

pointer-events: none;

và nó đang hoạt động tốt. Nhưng vì tài sản này không được IE hỗ trợ, tôi đang tìm kiếm một số công việc. Điều khó chịu là tôi không có quyền truy cập và đặc quyền để thay đổi hoàn toàn mã HTML và JavaScript .

Có ý kiến ​​gì không?

Sự kiện con trỏ là một vụ hack Mozilla và nơi nó đã được triển khai trong các trình duyệt Webkit, bạn không thể thấy nó trong các trình duyệt IE trong một triệu năm nữa.

Tuy nhiên, có một giải pháp tôi tìm thấy:

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

Điều này sử dụng một plugin sử dụng một số thuộc tính không được biết / hiểu rõ về Javascript để lấy sự kiện chuột và gửi nó đến một yếu tố khác.

Ngoài ra còn có một giải pháp Javascript khác ở đây .

Cập nhật cho tháng 10 năm 2013 : dường như nó sẽ đến với IE trong v11. Nguồn . Cảm ơn Tim.

Đây là một giải pháp rất dễ thực hiện với 5 dòng mã:

1. Nắm bắt sự kiện 'mousedown' cho phần tử trên cùng (phần tử bạn muốn tắt các sự kiện con trỏ).
2. Trong 'mousedown' ẩn phần tử trên cùng.
3. Sử dụng 'document.elementFromPoint ()' để lấy phần tử cơ bản.
4. Bỏ ẩn các yếu tố hàng đầu.
5. Thực hiện sự kiện mong muốn cho các yếu tố cơ bản.

Thí dụ:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

Có một cách giải quyết cho IE - sử dụng SVG nội tuyến và đặt con trỏ-event = "none" trong SVG. Xem câu trả lời của tôi trong Cách tạo Internet Explorer mô phỏng các sự kiện con trỏ: không?

Điều đáng nói là đặc biệt dành cho IE, disabled=disabledhoạt động cho các thẻ neo:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE coi đây là một disabledyếu tố và không kích hoạt sự kiện nhấp chuột. Tuy nhiên, disabledkhông phải là một thuộc tính hợp lệ trên thẻ neo. Do đó, điều này sẽ không hoạt động trong các trình duyệt khác. Đối với họ pointer-events:nonelà cần thiết trong phong cách.

UPDATE 1 : Vì vậy, thêm cảm thấy quy tắc sau đây như một giải pháp qua trình duyệt với tôi

CẬP NHẬT 2 : Để tương thích hơn nữa, vì IE sẽ không hình thành phong cách cho thẻ neo với disabled='disabled', vì vậy họ vẫn sẽ tìm kiếm hoạt động. Vì vậy, a:hover{}quy tắc và phong cách là một ý tưởng tốt:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Hoạt động trên Chrome, IE11 và IE8.
Tất nhiên, CSS ở trên giả định các thẻ neo được hiển thị vớidisabled="disabled"

Đây là một kịch bản nhỏ thực hiện tính năng này (lấy cảm hứng từ bài viết trên blog của Shea Frederick mà Kyle đề cập):

• Sự kiện con trỏ Polyfill .

Che các phần tử vi phạm bằng một khối vô hình, sử dụng phần tử giả: :beforehoặc:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

Do đó, bạn nhấp vào phần tử cha. Không tốt, nếu cha mẹ có thể nhấp, nhưng hoạt động tốt.

Tôi đã dành gần hai ngày để tìm giải pháp cho vấn đề này và cuối cùng tôi đã tìm thấy giải pháp này.

Điều này sử dụng javascript và jquery.

(GitHub) con trỏ_events_polyfill

Điều này có thể sử dụng trình cắm javascript để được tải xuống / sao chép. Chỉ cần sao chép / tải xuống mã từ trang web đó và lưu nó dưới dạng pointer_events_polyfill.js. Bao gồm javascript đó vào trang web của bạn.

<script src="JS/pointer_events_polyfill.js></script>

Thêm tập lệnh jquery này vào trang web của bạn

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

Và đừng quên bao gồm trình cắm jquery của bạn.

Nó hoạt động! Tôi có thể nhấp vào các yếu tố dưới yếu tố trong suốt. Tôi đang sử dụng IE 10. Tôi hy vọng nó cũng có thể hoạt động trong IE 9 trở xuống.

EDIT: Sử dụng giải pháp này không hoạt động khi bạn nhấp vào các hộp văn bản bên dưới phần tử trong suốt. Để giải quyết vấn đề này, tôi sử dụng tiêu điểm khi người dùng nhấp vào hộp văn bản.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Điều này cho phép bạn nhập văn bản vào hộp văn bản.

Tôi đã tìm thấy một giải pháp khác để giải quyết vấn đề này. Tôi sử dụng jQuery để đặt href-attribution thành javascript:;(không phải '' hoặc trình duyệt sẽ tải lại trang) nếu chiều rộng cửa sổ trình duyệt lớn hơn 1'000px. Bạn cần thêm một ID vào liên kết của bạn. Đây là những gì tôi đang làm:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Có lẽ nó hữu ích cho bạn.

Sử dụng OnClientClick = "return false;"

Bạn cũng có thể chỉ "không" thêm một url bên trong <a>thẻ, tôi làm điều này cho các menu được <a>điều khiển bằng thẻ thả xuống. Nếu không có thả xuống thì tôi thêm url nhưng nếu có <ul> <li>danh sách thả xuống với một danh sách tôi chỉ cần xóa nó.

Tôi đã đối mặt với các vấn đề tương tự:

1. Tôi đã đối mặt với vấn đề này trong một chỉ thị, tôi đã sửa nó bằng cách thêm phần tử cha của nó và tạo các sự kiện con trỏ: không có gì cho điều đó

2. Các sửa chữa ở trên không hoạt động cho thẻ chọn, sau đó tôi đã thêm con trỏ: văn bản (đó là những gì tôi muốn) và nó đã làm việc cho tôi

Nếu cần một con trỏ bình thường, bạn có thể thêm con trỏ: mặc định

Giải pháp tốt nhất:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Chạy hoàn hảo trên tất cả các trình duyệt