6

Please forgive me in advance for being a stoopid noob.

Anyway, I'm trying to make my html5 game play on IE10, but it's not detecting my clicks.

So I research this a bit and find out that instead of understanding what this means:

document.getElementById("answer1").addEventListener("click", wrong, false);

If have to use some crappy proprietary code. Because I am a stoopid noob, I am having problems implementing this.

Here is what I have currently

    document.getElementById("answer1").addEventListener("click", wrong, false);
    document.getElementById("answer2").addEventListener("click", wrong, false);
    document.getElementById("answer3").addEventListener("click", wrong, false);
    document.getElementById("answer4").addEventListener("click", wrong, false);
    //Stupid IE10 Crap
    if (window.navigator.msPointerEnabled) {
        document.getElementById("answer1").addEventListener("MSPointerDown", wrong, false);
        document.getElementById("answer2").addEventListener("MSPointerDown", wrong, false);
        document.getElementById("answer3").addEventListener("MSPointerDown", wrong, false);
        document.getElementById("answer4").addEventListener("MSPointerDown", wrong, false);
    }

When I run the code on ie10, it still doesn't register my mouse clicks. Am I missing something or doing something incorrectly?

Please assist me.

Donzo
  • 179
  • 1
  • 5

2 Answers2

9

Well, I do not why it wasn't working. It's still not working.

But I found a workaround that I thought that I would share. I added the following attributes to CSS of the target DIVs.

background-color:#FFFFFF; opacity:0;

For some reason, if I give the DIVS a background color and make them totally transparent, the clicks register.

So, I'm done caring about this problem for now.

I hope this helps someone.

Donzo
  • 179
  • 1
  • 5
  • 3
    WOW ! That is the most utterly ridiculous suggestion I've heard. Yet, it worked, and it's just saved me (even more) hours of trying to work out why my JQuery UI elements weren't draggable in IE9 & 10. Brilliant. Many thanks for sharing !!! – Mike Gledhill Apr 09 '13 at 13:46
  • 6
    @Donzo- I just ran into this too. But note that setting `opacity:0` will make *everything in your div transparent*! Prob not what you want. Instead, set the transparency *within* the background color like this: `background-color: rgba(255,255,255,0);`. See [here](http://www.css3.info/introduction-opacity-rgba/) for more. – Yarin Nov 12 '13 at 17:48
3

On each of those elements, add the css style -ms-touch-action: none;

IE10 seems to expect that on elements you want the Pointer events to interact with, so that it doesn't try to maintain default browser behavior.

Rune
  • 133
  • 7