Javascript Mousemove回调事件不显示按下了哪个鼠标按钮safari
我正在开发HTML5播放器。 除了SafariforOSX,它在所有浏览器上都正常工作。(此播放器应仅在桌面浏览器上工作) 我的搜索栏和音量栏有问题 基本上它是一个滑块,但是用div和其他东西实现。我做了以下几件事 为“mousemove”事件在元素上注册了回调。 触发此回调时,我检查事件中的按钮。 使用safari时,此属性始终为“未定义” 代码非常简单:Javascript Mousemove回调事件不显示按下了哪个鼠标按钮safari,javascript,jquery,macos,safari,Javascript,Jquery,Macos,Safari,我正在开发HTML5播放器。 除了SafariforOSX,它在所有浏览器上都正常工作。(此播放器应仅在桌面浏览器上工作) 我的搜索栏和音量栏有问题 基本上它是一个滑块,但是用div和其他东西实现。我做了以下几件事 为“mousemove”事件在元素上注册了回调。 触发此回调时,我检查事件中的按钮。 使用safari时,此属性始终为“未定义” 代码非常简单: this.controls.$seekBar.on('mousemove', (function(_this){
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));
它适用于您需要的所有浏览器。
event.jq event中规范化了哪个
属性,所以,我想,使用它吧……我使用event.buttons来检查按下了哪个鼠标。Event.which在safari中始终为1,即使我没有单击鼠标按钮。这就是which
propertyEvent.which在safari中始终为1的目的。它不应该!可能是一个bug,但我想没有编辑:好吧,我想的是mousedown里面的事件,不是mousemove,我的错!我在其他浏览器中使用了event.button,没有问题。我会换一下,看看是否有效,然后告诉你。谢谢很抱歉,该事件在firefox中始终显示为1。不管是否按下鼠标按钮。