SerenityNetworks Posted April 6, 2015 Share Posted April 6, 2015 I'm using the following to allow the mouse wheel to control the speed of video playback. Controlling the speed with the mouse wheel is working fine. However the page is also being scrolled, which is not desired. When the mouse is within the video tag, the wheel should control the video playback speed, but not scroll the window. When the mouse is outside the video tag the the wheel should again scroll the window. I thought the "return false" phrase at the end of the function should prevent the scroll value from being passed on, but apparently not. Or perhaps something else is capturing the scroll and moving the page. I don't know. I can capture the x/y coordinates at the start of the function and then return the page to those coordinates at the end of the function, but that seems like a kludge and it is visually very jumpy. I'd appreciate any help on preventing page scrolling when the mouse is within the video tag (or any other tag I might designate). Thanks in advance, Andrew In Body: <tr align="right"> <td align="right" valign="top" style="padding-right:10px"> <!-- Other buttons are here above the video display --> <video id="video" class="myStyle1" oncontextmenu="return false"></video></td> In Script: window.onload = function() { var sq = {}; sq.e = document.getElementById("video"); //if the wheel is scrolled in the tag with the id=video then it will vary the video playback speed if (sq.e.addEventListener) { // IE9, Chrome, Safari, Opera sq.e.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } // IE 6/7/8 else sq.e.attachEvent("onmousewheel", MouseWheelHandler); function MouseWheelHandler(e) { // cross-browser wheel delta var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); var vidSpeed1 = document.getElementById("video"); var vidSpeed2 = (Math.round(vidSpeed1.playbackRate*100)/100).toFixed(1); //sq.e.style.width = Math.max(sq.zoom, Math.min(sq.nw, sq.e.width + (sq.zoom * delta))) + "px"; if (delta === 1) { vidSpeed1.playbackRate = vidSpeed2 - (delta / 10 * (-1)); } else { vidSpeed1.playbackRate = vidSpeed2 - (delta / 10 * (-1)); } return false; //I THOUGHT SHOULD STOP THE WHEEL FROM SCROLLING THE PAGE } } Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2015 Share Posted April 6, 2015 The event object should have a preventDefault method, you should be able to use that to stop the default behavior. 1 Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 6, 2015 Author Share Posted April 6, 2015 Perfect. Thank you so very much. Andrew Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 Well, I thought I had it, but I was wrong. My initial solution worked initially, but later stopped. I'm not sure why. On further attempts I'm able to stop the default functionality, but I'm also stopping the functionality that I do want to occur. I can't figure it out. Below is a simple example. Please advise on what I need to do to stop the default mouse wheel functionality within the identified tag, but still allow the alternative functionality (an alert in this example). Thanks in advance, Andrew <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Mouse Wheel 03</title><style>*{ padding: 0; margin: 0;}body{ height: 100%; font-family: "Segoe UI", arial, helvetica, freesans, sans-serif; margin: 10px; color: #333; background-color: #fff; overflow-x: auto; overflow-y: scroll;}p{ margin: 0 0 1em 0;}#imageBlock{ display: block; width: 20%; margin: 2em auto; border: 5px solid #ccc; border-radius: 5px; cursor: n-resize; cursor: -webkit-zoom-in; cursor: -moz-zoom-in;}</style></head><body><header><h1>HTML5 Mouse Wheel Event Demonstration</h1></header><hr/><article id="scrollPlaybackSpeed"><br/><br/><br/>Hello World!<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><hr/>Function will work between the horizontal lines. It will not work above the top line or below the bottom line.</article><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><script>window.onload = function() {document.getElementById("scrollPlaybackSpeed").addEventListener("wheel", function(event){event.preventDefault()}); var sq = {}; sq.e = document.getElementById("scrollPlaybackSpeed"); if (sq.e.addEventListener) { // IE9, Chrome, Safari, Opera sq.e.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } // IE 6/7/8 else sq.e.attachEvent("onmousewheel", MouseWheelHandler); function MouseWheelHandler(e) { // cross-browser wheel delta var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if (delta === 1) { alert("plus 1"); } else if (delta === -1) { alert("minus 1"); } else { alert("something else"); } return false; } //document.getElementById("scrollPlaybackSpeed").addEventListener("wheel", function(event){event.stopPropagation()});}</script></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 The call to preventDefault needs to go inside the other handler. Your handler should do whatever you want to do and also prevent the default behavior. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 In the above example, I tried it inside the handler, but it didn't work (or I had something else wrong). I believe I have it with the following model where I can call the 'prevent' as needed in other functionality. But please let me know if you note anything amiss. Thanks, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>MouseWheel_04_Method-2</title></head><body><header><h1>HTML5 Mouse Wheel Event Demonstration</h1></header><hr/><article id="scrollPlaybackSpeed"><br/><br/><br/>Hello World!<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><hr/>Function will work between the horizontal lines. It will not work above the top line or below the bottom line.</article><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><script>function cancelDefaultAction(e) { var evt = e ? e:window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; return false;}//document.getElementById("scrollPlaybackSpeed").addEventListener("wheel", function(event){event.preventDefault()});window.onload = function() { var sq = {}; sq.e = document.getElementById("scrollPlaybackSpeed"); if (sq.e.addEventListener) { // IE9, Chrome, Safari, Opera sq.e.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } // IE 6/7/8 else sq.e.attachEvent("onmousewheel", MouseWheelHandler); function MouseWheelHandler(e) { // cross-browser wheel delta var evt = e ? e:window.event; //captures event for cancelDefaultAction(evt) var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if (delta === 1) { alert("plus 1"); return cancelDefaultAction(evt); } else if (delta === -1) { alert("minus 1"); return cancelDefaultAction(evt); } else { alert("something else"); } return false;// return cancelDefaultAction(evt); }}</script></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 It should be enough to just call e.preventDefault inside the mouse wheel handler. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 It is what I thought as well, but for some reason it doesn't work. Can you see my error? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>MouseWheel_05_Method-2</title></head><body><header><h1>HTML5 Mouse Wheel Event Demonstration</h1></header><hr/><article id="scrollPlaybackSpeed"><br/><br/><br/>Hello World!<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><hr/>Function will work between the horizontal lines. It will not work above the top line or below the bottom line.</article><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><script>function cancelDefaultAction(e) { var evt = e ? e:window.event; if (evt.preventDefault) evt.preventDefault(); evt.returnValue = false; return false;}window.onload = function() { var sq = {}; sq.e = document.getElementById("scrollPlaybackSpeed"); if (sq.e.addEventListener) { // IE9, Chrome, Safari, Opera sq.e.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } // IE 6/7/8 else sq.e.attachEvent("onmousewheel", MouseWheelHandler); function MouseWheelHandler(e) { // cross-browser wheel delta var evt = e ? e:window.event; //captures event for cancelDefaultAction(evt) var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if (delta === 1) { alert("plus 1"); //return cancelDefaultAction(evt); e.preventDefault; } else if (delta === -1) { alert("minus 1"); //return cancelDefaultAction(evt); e.preventDefault; } else { alert("something else"); } return false; }}</script></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 You need parentheses after the function name to call the function. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 It's still scrolling when I'm within the tag with id=scrollPlaybackSpeed. <script>window.onload = function() { var sq = {}; sq.e = document.getElementById("scrollPlaybackSpeed"); if (sq.e.addEventListener) { // IE9, Chrome, Safari, Opera sq.e.addEventListener("mousewheel", MouseWheelHandler, false); // Firefox sq.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } // IE 6/7/8 else sq.e.attachEvent("onmousewheel", MouseWheelHandler); function MouseWheelHandler(e) { // cross-browser wheel delta var evt = e ? e:window.event; //captures event for cancelDefaultAction(evt) var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if (delta === 1) { alert("plus 1"); e.preventDefault(); } else if (delta === -1) { alert("minus 1"); e.preventDefault(); } else { alert("something else"); } return false; }}</script> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 Are you seeing one of the first 2 alerts and it still scrolls? Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 Yes. If I'm within the <article id="scrollPlaybackSpeed"> tag and I scroll, I see the appropriate alert but then it also scrolls (and I don't want the scrolling). If I'm outside the tag then it scrolls and (appropriately) there are no alerts. The example is supposed to simulate the functioning I'm trying to accomplish. I have a tag, <video id="video"></video>, and when the mouse is scrolled over the video playback then I want the default scrolling to be disabled and a function that controls the video playback speed used instead. Thanks, Andrew Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 I see the appropriate alertAnd it's one of the first 2, correct? Not the third one? It looks like you only want to cancel the default behavior in certain situations but not all. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 8, 2015 Author Share Posted April 8, 2015 Yes. Actually, in this situation it is either a 1 or a -1. There is no possible 'else'. I just didn't take it out of my experimenting page. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2015 Share Posted April 8, 2015 It seems like it should work, but there are other people reporting problems.https://www.google.com/search?client=opera&q=wheel+scroll+prevent+default&sourceid=opera&ie=UTF-8&oe=UTF-8 Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 9, 2015 Author Share Posted April 9, 2015 Hmmm. It works in Chrome. Thanks for the links. I'll need to see if there is a reliable way for it to work in FF. If not, I guess I'll just have to go forward with only Chrome. It's not the end of the world, but I'd rather not be locked to specific browsers. Thanks again, Andrew Link to comment Share on other sites More sharing options...
SerenityNetworks Posted April 9, 2015 Author Share Posted April 9, 2015 Thank you for the references. I was able to find a solution at Mozilla Developers Network (MDN). The following works properly. I've even included the video script to be sure that didn't break it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>MouseWheel_08_Method-4</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}/* VIDEO STYLES */video, input { display: block;}input { width: 100%; }.info { background-color: aqua; }.error { background-color: red; color: white;}</style></head><body onload="pageLoad()" oncontextmenu="return false"><div id="message"></div><input type="file" accept="video/*"/><video id="myDiv1" style="width:250px" controls autoplay></video><br/><div id="freeDiv" style="background-color:#EBEBEB;border:thick;width:300px;padding:25px 25px 25px 25px;text-align:left">This area not constrained.<input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label><input type="button" onclick="simulateClick();" value="Simulate click"/><input type="button" onclick="addHandler();" value="Add a handler that calls preventDefault"/><input type="button" onclick="removeHandler();" value="Remove the handler that calls preventDefault"/></div><br/><div id="myDiv2" style="background-color:gray;border:thick;width:300px;padding:75px 25px 75px 25px">What is in here should not scroll.Source: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" target="_blank">Mozilla Developer Network (MDN)</a></div>Anything here and below should scroll freely.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>More<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>More<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Bottom of page.<script>function preventDef(event) { event.preventDefault();}function addHandler() { document.getElementById("checkbox").addEventListener("click", preventDef, false); document.getElementById("myDiv1").addEventListener("wheel", preventDef, false); document.getElementById("myDiv2").addEventListener("wheel", preventDef, false);}function removeHandler() { document.getElementById("checkbox").removeEventListener("click", preventDef, false); document.getElementById("myDiv1").removeEventListener("wheel", preventDef, false); document.getElementById("myDiv2").removeEventListener("wheel", preventDef, false);}function simulateClick() { var evt1 = document.createEvent("MouseEvents"); evt1.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var cb = document.getElementById("checkbox"); var canceled = !cb.dispatchEvent(evt1); if(canceled) { // A handler called preventDefault alert("canceled"); } else { // None of the handlers called preventDefault alert("not canceled"); }}(function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); var message = 'Can play type "' + type + '": ' + canPlay; var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false);}(window));</script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now