鼠标移动回调事件没有显示哪个鼠标按钮被按下

Mousemove callback event not showing which mouse button is pressed safari

本文关键字：鼠标 按钮 显示 移动 回调 事件      更新时间：2023-09-26

我正在开发一个HTML5播放器。它在所有浏览器上都能正常工作，除了osx的safari。(这个播放器应该只能在桌面浏览器上工作)。

我的搜索栏和音量栏有问题。

基本上它是一个滑动条，但是用div之类的实现。我做了以下的事情。

为' mousmove '事件在元素上注册了一个回调函数。当这个回调被触发时，我检查按钮事件。当使用safari时，此属性总是'undefined'。

代码很简单:

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));

因为它是一个jQuery插件，我需要使用闭包来传递插件上下文回调，但这不是问题。我测试没有作为一个jQuery插件和相同的错误发生。

safari中生成的事件对象:

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

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..

您可以简单地像下面这样修改代码:

   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));

它将适用于所有浏览器

相关文章：