web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-12 11:15:04 +02:00
Code Releases Activity

fix: change 'mousedown' to the 'mouseup' event in the player (#5992)

Browse Source 
This player behavior is very useful for accessibility because the user can cancel the action by clicking outside the button area. It is recommended by the WCAG 2.1 "2.5.2 Pointer Cancellation" spec.
This commit is contained in:
Grzegorz Blaszczyk 2019-05-21 17:51:37 +02:00 committed by Gary Katsevman
parent fc2147523b
commit 075a5043b9
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/player.js
View File

@ -1246,7 +1246,7 @@ class Player extends Component {
// trigger mousedown/up.
// http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
// Any touch events are set to block the mousedown event from happening
this.on(this.tech_, 'mousedown', this.handleTechClick_);
this.on(this.tech_, 'mouseup', this.handleTechClick_);
this.on(this.tech_, 'dblclick', this.handleTechDoubleClick_);
// If the controls were hidden we don't want that to change without a tap event
@ -1274,7 +1274,7 @@ class Player extends Component {
this.off(this.tech_, 'touchstart', this.handleTechTouchStart_);
this.off(this.tech_, 'touchmove', this.handleTechTouchMove_);
this.off(this.tech_, 'touchend', this.handleTechTouchEnd_);
this.off(this.tech_, 'mousedown', this.handleTechClick_);
this.off(this.tech_, 'mouseup', this.handleTechClick_);
this.off(this.tech_, 'dblclick', this.handleTechDoubleClick_);
}
@ -1845,7 +1845,7 @@ class Player extends Component {
* @param {EventTarget~Event} event
* the event that caused this function to trigger
*
* @listens Tech#mousedown
* @listens Tech#mouseup
* @private
*/
handleTechClick_(event) {

6
src/js/utils/dom.js
View File

@ -786,6 +786,12 @@ export function isSingleLeftClick(event) {
return true;
}
// `mouseup` event on a single left click has
// `button` and `buttons` equal to 0
if (event.button === 0 && event.buttons === 0) {
return true;
}
if (event.button !== 0 || event.buttons !== 1) {
// This is the reason we have those if else block above
// if any special case we can catch and let it slide