IE의 CSS '포인터 이벤트'속성 대안

클릭 할 때 제목 중 일부가 다른 페이지로 이동해서는 안되는 드롭 다운 탐색 메뉴가 있습니다 (클릭하면 클릭하면 드롭 다운 메뉴가 열립니다). 유형은 href그들에게 정의

이 문제를 해결하기 위해 이전 유형의 제목에 다음 CSS를 추가했습니다.

pointer-events: none;

이 속성은 IE에서 지원하지 않기 때문에 몇 가지 해결 방법을 찾고 있습니다. 성가신 것은 HTML 및 JavaScript 코드를 완전히 변경할 수있는 액세스 권한이 없다는 것입니다 .

어떤 아이디어?

포인터 이벤트는 모질라 핵이며 웹킷 브라우저에서 구현 된 곳에서는 IE 브라우저에서 백만 년 동안이를 볼 수 없습니다.

그러나 내가 찾은 해결책이 있습니다.

레이어를 통한 마우스 이벤트 전달

이것은 잘 알려지지 않은 Javascript 속성을 사용하여 마우스 이벤트를 가져 와서 다른 요소로 보내는 플러그인을 사용합니다.

또 다른 Javascript 솔루션이 있습니다 .

2013 년 10 월 업데이트 : 분명히 v11에서 IE에 제공됩니다. 소스 . 고마워 팀.

다음은 5 줄의 코드로 구현하기 매우 쉬운 또 다른 솔루션입니다.

1. 상단 요소 (포인터 이벤트를 끄려는 요소)에 대한 'mousedown'이벤트를 캡처하십시오.
2. '마우스 다운'에서 상단 요소를 숨 깁니다.
3. 기본 요소를 가져 오려면 'document.elementFromPoint ()'를 사용하십시오.
4. 상단 요소를 숨 깁니다.
5. 기본 요소에 대해 원하는 이벤트를 실행하십시오.

예:

//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;

});

IE에 대한 해결 방법이 있습니다. SVG에서 인라인 SVG를 사용하고 pointer-events = "none"을 설정하십시오. Internet Explorer에서 포인터 이벤트를 에뮬레이트하는 방법 : 내 대답을 참조하십시오 .

IE의 경우 disabled=disabled앵커 태그 에서 작동 한다는 점을 언급 할 가치가 있습니다 .

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

IE는 이것을 disabled요소 로 취급 하고 클릭 이벤트를 트리거하지 않습니다. 그러나 disabled앵커 태그에 유효한 속성이 아닙니다. 따라서 다른 브라우저에서는 작동하지 않습니다. 그것들 pointer-events:none은 스타일링에 필요합니다.

UPDATE 1 : 나에게 크로스 브라우저 솔루션처럼 다음과 같은 규칙 Feel로를 추가하는 것은 그래서

2 UPDATE : IE는 앵커 태그의 스타일을 형성하지 않습니다 더 호환성 때문에 disabled='disabled'그들은 여전히 있도록, 볼 활성. 따라서 a:hover{}규칙과 스타일은 좋은 생각입니다.

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;
        }

Chrome, IE11 및 IE8에서 작업합니다.
물론 위의 CSS는 앵커 태그가 다음과 같이 렌더링된다고 가정합니다.disabled="disabled"

이 기능을 구현하는 작은 스크립트는 다음과 같습니다 ( 카일이 언급 한 Shea Frederick 블로그 기사 에서 영감을 얻음 ).

• 포인터 이벤트 Polyfill .

의사 요소를 사용하여 문제가되는 요소를 보이지 않는 블록으로 덮습니다. :before또는:after

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

따라서 부모 요소를 클릭하면됩니다. 부모님이 클릭 할 수 있지만 좋지 않은 경우에는 효과가 없습니다.

나는이 문제에 대한 해결책을 찾는 데 거의 이틀을 보냈고 마침내 이것을 발견했습니다.

이것은 자바 스크립트와 jquery를 사용합니다.

(GitHub) pointer_events_polyfill

자바 스크립트 플러그인을 사용하여 다운로드 / 복사 할 수 있습니다. 해당 사이트에서 코드를 복사 / 다운로드하고로 저장하십시오 pointer_events_polyfill.js. 해당 자바 스크립트를 사이트에 포함 시키십시오.

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

이 jquery 스크립트를 귀하의 사이트에 추가하십시오

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

그리고 jquery 플러그인을 포함시키는 것을 잊지 마십시오.

효과가있다! 투명 요소 아래에서 요소를 클릭 할 수 있습니다. IE 10을 사용하고 있습니다. IE 9 이하에서도 작동 할 수 있기를 바랍니다.

편집 : 투명 요소 아래의 텍스트 상자를 클릭하면이 솔루션을 사용할 수 없습니다. 이 문제를 해결하기 위해 사용자가 텍스트 상자를 클릭 할 때 포커스를 사용합니다.

자바 스크립트 :

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

jQuery :

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

텍스트 상자에 텍스트를 입력 할 수 있습니다.

이 문제를 해결하는 다른 해결책을 찾았습니다. 브라우저 창 너비가 1'000px보다 큰 경우 jQuery를 사용하여 href-attribute를 javascript:;''이 아니거나 브라우저가 페이지를 다시로드합니다. 링크에 ID를 추가해야합니다. 내가하고있는 일은 다음과 같습니다.

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

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

아마도 당신에게 유용 할 것입니다.

사용하다 OnClientClick = "return false;"

<a>태그 안에 URL을 "추가하지"않을 수도 <a>있습니다. 드롭 다운으로 태그 구동되는 메뉴에 대해서도이 작업을 수행합니다. 드롭 다운이 없으면 URL을 추가하지만 <ul> <li>목록 이있는 드롭 다운이 있으면 제거하십시오.

나는 비슷한 문제에 직면했다.

1. 지시문 에서이 문제에 직면하여 부모 요소로 a를 추가하고 포인터 이벤트를 만드는 문제를 해결했습니다.

2. 위의 수정은 select 태그에서 작동하지 않았고 커서 : text ( 텍스트 는 내가 원했던 것)를 추가했으며 그것은 나를 위해 일했습니다.

일반 커서가 필요한 경우 cursor : default를 추가 할 수 있습니다 .

최고의 솔루션 :

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

모든 브라우저에서 완벽하게 실행