Geek Answers Handbook

Mousemove callback event not showing which mouse button is pressed by Safari

I am developing an HTML5 player. It works fine in all browsers except safari for osx. (This player should only work on a desktop browser).

I have a problem with the search bar and volume bar.

This is mainly a slider, but implemented using a div, etc. I did the following.

The registered callback for the item for the mousemove event. When these callbacks fire, I check the event for buttons. When using safari, this attribute is always "undefined".

The code is very simple:

this.controls.$seekBar.on('mousemove', (function(_this){ return function(event){ if (event.buttons == 1) { // Do some stuff } } })(this)) .on('mousedown', (function(_this){ return function(event){ if (event.buttons == 1) { // Do some stuff } } })(this));

Since this is a jQuery plugin, I need to use closure to pass the context of the plugin for the callback, but this is not a problem. I tested without being a jQuery plugin and the same error occurs.

Safari generated event object:

 altKey: false bubbles: true button: 0 buttons: undefined cancelable: true clientX: 529 clientY: 674 ctrlKey: false currentTarget: div#seekBar1.vjs-progress-holder vjs-slider data: undefined delegateTarget: div#seekBar1.vjs-progress-holder vjs-slider eventPhase: 2 fromElement: null handleObj: Object isDefaultPrevented: function bb() {return!1;} jQuery111103980477461591363: true metaKey: false offsetX: 150 offsetY: 8 originalEvent: MouseEvent pageX: 529 pageY: 781 relatedTarget: null screenX: 530 screenY: 759 shiftKey: false target: div#seekBar1.vjs-progress-holder vjs-slider timeStamp: 1438352150671 toElement: div#seekBar1.vjs-progress-holder vjs-slider type: "mousedown" view: Window which: 1 __proto__: Object

Event object generated in firefox:

 altKey: false bubbles: true button: 0 buttons: 1 cancelable: true clientX: 587 clientY: 563 ctrlKey: false currentTarget: div#seekBar1.vjs-progress-holder.vjs-slider data: undefined delegateTarget: div#seekBar1.vjs-progress-holder.vjs-slider eventPhase: 3 fromElement: undefined handleObj: Object { type="mousedown", origType="mousedown", guid=36, more...} jQuery111105827101769842828: true metaKey: false offsetX: undefined offsetY: undefined originalEvent: mousedown clientX=587, clientY=563 pageX: 587 pageY: 780 relatedTarget: null screenX: 587 screenY: 665 shiftKey: false target: div#progressBar1.vjs-play-progress timeStamp: 1175114810 toElement: undefined type: "mousedown" view: Window 561 which: 1 isDefaultPrevented: bb() isImmediatePropagationStopped: bb() isPropagationStopped: bb() preventDefault: function() stopImmediatePropagation: function() stopPropagation: function() __proto__: Object { isDefaultPrevented=bb(), isPropagationStopped=bb(), isImmediatePropagationStopped=bb(), more..
+5
source share
1 answer

You can simply change your code as shown below:

  this.controls.$seekBar.on('mousemove', (function(_this){ return function(event){ var buttons = (e.buttons === undefined ? e.which : e.buttons); if (buttons == 1) { // Do some stuff } } })(this)) .on('mousedown', (function(_this){ return function(event){ var buttons = (e.buttons === undefined ? e.which : e.buttons); if (event.buttons == 1) { // Do some stuff } } })(this));

It will work for the whole browser that you need.

+4
source

More articles:


All Articles