0

I've got the following code:

    <div style="cursor:pointer" onclick="alert('div clicked');">
        <input
            type="checkbox"
            onclick="alert('checkbox clicked');"
            style="pointer-events:none">
            Show Retired Products
    </div>

Here's the JSFiddle for it

When I click the div (such as by clicking on the "Show Retired Products" text), it correctly fires the onclick event for the div in both browsers. However, if I click the actual checkbox, the behavior between Chrome and IE differs.

In Chrome, when I click the actual checkbox, the input's onclick never fires, nor does the state of the checkbox change. The div's onclick event does fire, though.

In IE, when I click the actual checkbox, first the checkbox's onclick event fires, and then the div's onclick event fires (which can be prevent with event.stopPropagation if I want).

Why isn't the input getting toggled in Chrome? How can I make these behave identically? Which browser is actually working "correctly"?

In case it matters, Chrome is version 40.0.2214.93 and IE is 11.0.9600.17498.

Just tested in Firefox 32.0 and it functions identical to Chrome.

Sterno
  • 1,638
  • 2
  • 17
  • 28
  • Isn't `pointer-events:none` badly supported in IE? – Vucko Feb 03 '15 at 14:29
  • I tried removing the styles, but it doesn't seem to matter. – Sterno Feb 03 '15 at 14:33
  • [Seems to work](http://jsfiddle.net/krqptfne/) when you remove the `pointer-events:none` style (Chrome v40.0.2214.91) – Vucko Feb 03 '15 at 14:35
  • You're right, I spoke too soon. it didn't seem to matter for IE, but it did make Chrome work like IE did. Thanks! So basically, Chrome was listening to that, but IE was ignoring it? – Sterno Feb 03 '15 at 14:37
  • According to [caniuse](http://caniuse.com/#feat=pointer-events), `pointer-events` should work in IE11. Are you sure that you have IE11? – Vucko Feb 03 '15 at 14:39
  • Yes, I'm sure I have IE 11. But the more I'm reading, the more it sounds like IE maybe only supports this for SVG elements. [See here](http://stackoverflow.com/a/17441921/134310). Though that's pretty old. – Sterno Feb 03 '15 at 14:49
  • I've just checked on my windows machine (in IE11) your code and it also works with `style="pointer-events:none"` added (same result like in chrome or FF). – Vucko Feb 03 '15 at 20:13
  • Well, I don't know what to tell you. I'm definitely using IE11. http://i.stack.imgur.com/i57GN.png – Sterno Feb 03 '15 at 21:04
  • Can you make a full fiddle? – Vucko Feb 03 '15 at 21:06
  • @Vucko I've updated the question to add it. – Sterno Feb 03 '15 at 21:15

1 Answers1

1

pointer-event: none; is supported in IE11+ even in IE11 it has some weird behaviour. One way around is to use a transparent overlay to disable checkbox. 

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
}

here's the fiddle

Waqar Ali
  • 11
  • 2