onClick not working with single click in IE 11

Question

I am trying to play/pause the video when a user clicks anywhere on the video. The problem is that it is working on the double click in IE 11 and for all the other browsers, it is working perfectly with single left click. Following is my code.

var obj = "<object id=\"video\" onClick=\"clicked('video')\" data=\"data:application/x-silverlight-2,\" type=\"application/x-silverlight-2\" width=\"" + width1 + "%\" height=\"" + height1 + "%\">" +
                "<param name=\"onLoad\" value=\"pluginLoad\" />" +
                "<param name=\"source\" value=\"player.xap\"/>" +
                "<param name=\"initParams\" value=\"sourceurl=" + url + "\" />" +
                "</object>";

videoClicked method is as follows"

function clicked(ID) {
    $("video").css("cursor", "pointer");
    var mediaElementName = "mediaPlayer";
    var host = document.getElementById(ID);
    var s = host.content.findName(mediaElementName).CurrentState;
    if (s == "Paused")
        host.content.findName(mediaElementName).Play();
    else
        host.content.findName(mediaElementName).Pause();
}

I want it to work with a single left click. When I am using onmousedown, it is working perfectly on IE 11 as well. Can anyone tell me what is wrong with my code?

Thanks.

Why not get the element with jquery and let jquery attach the click handler. — albertjan, Jul 07 '14 at 19:16
You mean like this $("video").click(function (){...}); ? It did not work. — user3745870, Jul 07 '14 at 19:18

albertjan · Accepted Answer · 2016-04-19T11:05:19.180

1

You shouldn't want to attach the handlers in html, or by yourself. You'll get into loads of these cross browser issues.

Try this:

$("#video").mouseup(function(e) {
    if (e.which != 1) return false;    // Stops all non-left-clicks
    alert("clicked");
});

edited Apr 19 '16 at 11:05

answered Jul 07 '14 at 19:20

albertjan

7,739
6
44
74

This is not working either with a double click or a single click. – user3745870 Jul 07 '14 at 19:42
Then you are going to have to handle the click event in silverlight. If you don't have control over that, I don't know the answer. – albertjan Jul 07 '14 at 19:44
I tried this $("body").on("click", "object", function(){alert("clicked");}); but still it is working on double click only. – user3745870 Jul 07 '14 at 20:47
Isn't there a mouse up event you could use? – albertjan Jul 07 '14 at 21:08
But that works on right click too. I just want to left click. mouseup is working fine with single left or right click. – user3745870 Jul 08 '14 at 13:54
http://stackoverflow.com/questions/14048344/jquery-mouseup-function-on-left-mouse-button-only – albertjan Jul 08 '14 at 14:03
Thanks a lot. It worked. Can you please tell me why this thing $("#video").css("cursor", "pointer"); is not working? – user3745870 Jul 08 '14 at 14:57

WickyNilliams · Answer 2 · 2014-07-07T19:25:25.307

The reason it's not working is because you're not passing a function to onClick, you're invoking a function. To fix this, return a function from clicked, which closes around the id "video"

function clicked(ID) {
    return function() {
      $("video").css("cursor", "pointer");
      var mediaElementName = "mediaPlayer";
      var host = document.getElementById(ID);
      var s = host.content.findName(mediaElementName).CurrentState;
      if (s == "Paused")
          host.content.findName(mediaElementName).Play();
      else
          host.content.findName(mediaElementName).Pause();
    }
}

This is assuming that in other circumstances there will be IDs other than video, otherwise you could just hardcode the value and not return a function.

Or if this seems complex, simply get the ID of the element by reading it from the event object:

function clicked(e) {
    var host = e.target;
    var ID = host.id;
    $("video").css("cursor", "pointer");
    var mediaElementName = "mediaPlayer";
    var s = host.content.findName(mediaElementName).CurrentState;
    if (s == "Paused")
        host.content.findName(mediaElementName).Play();
    else
        host.content.findName(mediaElementName).Pause();
}

but then you should adjust your HTML as so, passing a reference to the clicked function

var obj = "<object id=\"video\" onClick=\"clicked\" data=\"data:application/x-silverlight-2,\" type=\"application/x-silverlight-2\" width=\"" + width1 + "%\" height=\"" + height1 + "%\">" +
                "<param name=\"onLoad\" value=\"pluginLoad\" />" +
                "<param name=\"source\" value=\"player.xap\"/>" +
                "<param name=\"initParams\" value=\"sourceurl=" + url + "\" />" +
                "</object>";

it's incredibly hard to diagnose without a fiddle or something of that irk. i suggest you do that and you will likely get the answer to your problem a lot quicker — WickyNilliams, Jul 07 '14 at 19:31

onClick not working with single click in IE 11

2 Answers2

Linked