Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
355 views
in Technique[技术] by (71.8m points)

javascript - "pointer-events: none" does not work in IE9 and IE10

The CSS - property pointer-events: none; works fine in Firefox, but it does not in Internet Explorer 9-10.

Is there a way to achieve the same behaviour of this property in IE? Any ideas?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

From the MDN docs:

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

Read more here, basically, pointer-events on a non-SVG (Scalable Vector Graphic) is non-standard.
If you check the browser support table on the linked page (about two-thirds down) you'll note that IE support on non-svg's is ziltsh, jack squat, naut,... not supported, that is.

After some digging, I did come across this article that does allow for you to mimic the behaviours through use of layers, and , thanks to this post, I found this JS-bin That might help...

However, in IE (and Opera, and AFAIK all browsers), you could simply force a type of cursor on an element:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

The result should be pretty similar to that of pointer-events: none;

Update:

If you want to prevent the click events in IE that, as shasi pointed out, is prevented in other browsers, simply add an event listener that delegates the click event.
I'll assume, at the moment, that you're targeting all a elements:

var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

That should prevent all click events on anchor elements.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...