pointer-events none not behaving as expected in IE

Question

I am having an issue with pointer-events:none css. I am trying to disable a combo box. Now this CSS works perfectly in Chrome and Firefox but in IE it works partially.

Though the combo box is still disabled in IE i am able to click on combo box and dropdown gets displayed which should not be. Please guide if i can use some patch for the same.

Below is the code:

.pointer-events {
  pointer-events: none;
}

<select id="originPlaceId" name="originPlaceId" class="pointer-events" size="1" style="width:99%;">
  <option value="Tiger">Tiger</option>
  <option value="Lion">Lion</option>
</select>

It doesn't work in IE9 and 10 This might help: http://stackoverflow.com/questions/17441810/pointer-events-none-does-not-work-in-ie9-and-ie10 — eddyP23, Feb 09 '17 at 09:22
MSDN also claims that it works in IE11+: https://msdn.microsoft.com/en-us/library/ff972269(v=vs.85).aspx — eddyP23, Feb 09 '17 at 09:24
Pointer events do work in IE11. However, if the browser is in compatibility mode (or quirks mode) then the feature will be switched off. — Simba, Feb 09 '17 at 09:25
Possible duplicate of [How to make Internet Explorer emulate pointer-events:none?](http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone) — CalvT, Feb 09 '17 at 09:27

score 0 · Answer 1 · edited May 23 '17 at 12:01

resolved here : stackoverflow

Hope this helps :)

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

You can also try a javascript solution :

http://jsbin.com/uhuto

function passThrough(e) {
    $(".box").each(function() {
       // check if clicked point (taken from event) is inside element
       var mouseX = e.pageX;
       var mouseY = e.pageY;
       var offset = $(this).offset();
       var width = $(this).width();
       var height = $(this).height();

       if (mouseX > offset.left && mouseX < offset.left+width && mouseY > offset.top && mouseY < offset.top+height)
         $(this).click(); // force click event
    });
}

$("#shield").click(passThrough);

var dthen = new Date();


var doPassThrough = true;
$('input').click(function(){
  doPassThrough =  !doPassThrough;
  if (doPassThrough){
    $("#shield").click(passThrough);
  } else {
    $('#shield').unbind('click', passThrough);
  }
});

score -1 · Answer 2 · answered Feb 09 '17 at 09:29

-1

you can use plugin when your are in internet explorer : pointer events polyfill

answered Feb 09 '17 at 09:29

pointer-events none not behaving as expected in IE

2 Answers2