我正在开发一个HTML5播放器.
它在所有浏览器上运行正常,除了osx的safari. (此播放器应该仅适用于桌面浏览器).
我有一个搜索栏和音量栏的问题.
基本上它是一个滑块,但用div和东西实现.我做了以下.
在’mousemove’事件的元素上注册了一个回调.
触发此回调时,我会检查事件是否有按钮.
使用safari时,此属性始终为“未定义”.
代码很简单:
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));
它适用于您需要的所有浏览器.