In my jquery-ui draggable I have this -
....
_mouseMove: function(event) {
// IE mouseup check - mouseup happened when mouse was out of window
if ($.browser.msie && !event.button) {
return this._mouseUp(event);
}
if (this._mouseStarted) {
this._mouseDrag(event);
return event.preventDefault();
}
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted =
(this._mouseStart(this._mouseDownEvent, event) !== false);
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
}
return !this._mouseStarted;
},
....
Notice there is condition in the start for internet explorer. Now what is happening in my webpage is that dragging is not working for IE9 and IE10. It works for IE8, (I guess html markup errors have to do something regarding that and I am not worried about it). When I comment that condition dragging works in IE9 and IE10 i.e. I have found the fix for the problem I am facing. But as it is very high level javascript I here expecting a help from someone to explain me what is happening in the condition above.
Related
So I posted a answer to this question Disable mouse scroll middle click event with jQuery
And came up with this solution. I know how to solve this problem, but I just cant understand why this behavior is happening
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
After some time a got a comment saying it doesn't work when removing the alert(), so i tested it and he was right. Now the tab is opened on middle mouse click
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
}
}
click here
What is causing this behavior? First i thought it was a chrome feature/bug but it's the same behavior with edge and IE
I have two pages, these are the conditions I cannot achieve, please let me know if it is not possible.
In one page, I need to disable the mouse-wheel to scroll up. So when I scroll up with mouse-wheel nothing happens, but when I scroll down the page scrolls.
In the other page, I want the exact opposite, I need to disable the scrolling down on mouse-wheel. So when I scroll down nothing happens, but when I scroll up the page scrolls.
This is all i really need, but if you think I need to explain more, please let me know, thank you.
This code works for div with id "mydiv". You can change the mydiv to the body or any other element you want. The code works in all browsers.
JS:
var mydiv = document.getElementById("mydiv");
if (mydiv.addEventListener) {
// IE9, Chrome, Safari, Opera
mydiv.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
mydiv.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
mydiv.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) // if mouse scrolls up
{
alert('up');
}
if(delta==-1) // if mouse scrolls down, we disable scrolling.
{
e.preventDefault();
e.stopPropagation();
return false;
}
return false;
}
NOTE: Remember to set overflow to auto or scroll for this function to work.
A working example: Click Here
Hope this helps.
Case of preventing mouse scroll down (for mouse scroll up just change comparison operator to '<'):
$(window).on("wheel mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});
We need to check for two values because of cross-browser issues.
jsFiddle link
P. S. Warning. Since later versions of Chrome decides to treat all window events as passive by default, the code above won't work in Chrome. Will come with a better solution and update this answer ASAP.
You could try this to disable mouse scroll. I understand this is not as per your question but I believe it could help you.
JS:
function disableMouseScroll() {
return false;
}
document.onmousewheel=disableMouseScroll;
Link
This question has been asked plenty of times before, but no answers I have found seem to solve my problem.
From a classic asp page I call a Javascript function
on each of my pages. The point is to fire a search button when a user enters search text and presses enter, rather than clicking on the button, or choosing from the Ajax provided selections.
This works fine in IE and FF, as has been the case for every other question asked along these lines.
Here is the Javascript. Can anybody tell me please how to have it work for Chrome as well as IE and FF ?
Edited following answer form Alexander O'Mara below:
Altered function call in body tag on page to use onkeyup instead of onkeypress - onkeyup="KeyPress(event)"
Altered JS function (also after heeding comments re duplication from others - thanks) as follows:
function KeyPress(e)
{
var ev = e || window.event;
var key = ev.keyCode;
if(window.event) // IE
{
key = e.keyCode;
if (key == 13)
{
window.event.keyCode = 0;
$('#btnSearch').click();
}
}
else if (key == 13)
{
btnSearch.click();
ev.preventDefault();
}
}
It seems to work sometimes and not others, and rarely on chrome currently. Is there a guaranteed way to have it work all the time ?
The main page of my site if you want to try it yourself is www.dvdorchard.com.au, your cursor will be sitting in the search box on arrival - enter a word > 3 chars and press enter, if you stay on the page it didn't work, if you move to the productfound.asp page it worked.
Thanks again.
You are looking for the keyup event (documentation). The keypress event is not consistent across browsers. See this question for information on the differences.
Update:
Since you are using jQuery, you can also remove the onkeyup="KeyPress(event)" attribute for you body, and replace your KeyPress function with the following (replacing the contents with your event handling code).
$(window).keyup(function(e){
/*YOUR CODE HERE*/
});
if(e.keyCode)
{
key= e.keyCode;
}
else
{
key = e.charCode;
}
Fire your event with onkeyup
read more
this should work in chrome. I don't know about other browsers
function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
var key = code(e);
// do something with key
// done doing something with key
key=0
};
};
I am working on a scrollbar in Javascript. All works fine except for one problem. I notice that while dragging the scrollbar, if I move the mouse over the context that is being scrolled, the content gets selected. I don't want that to happen, so I used the preventDefault method from the event object, which worked perfectly for IE9 and the other modern browsers. But on IE7 and IE8, the problem persists. I did some searches and found that I should set the returnValue parameter of the event object to false. But the problem still persists. Also, if I write alert(window.event.returnValue) it pops up undefined.
scrollbar.onmousedown = function (event) {
if (typeof event == 'undefined') event = window.event;
if (typeof event.preventDefault != 'undefined') event.preventDefault();
event.returnValue = false;
// do some stuff
}
What am I doing wrong?
In IE7&8 there is no event Object as a parameter to the function, instead there exists window.event. Try
window.event.cancelBubble = true
to stop the propagation.
To avoid problems with FireFox etc. do something like this:
if (!event)
event = window.event;
//IE9 & Other Browsers
if (event.stopPropagation) {
event.stopPropagation();
}
//IE8 and Lower
else {
event.cancelBubble = true;
}
I fixed my problem in the end by adding event.returnValue = false in the 'onmousemove' event, instead on 'onmousedown' event and it worked. It doesn't answer the question about why the orginal code is wrong, but I wanted to post this for people that see my question, to not waste their time in trying to help me with a problem that I have already fixed. Thank you for your quick answers, I appreciate.
I too had the same problem.
preventDefault was not working in IE.
so I added the below code to stop propagation
if (a_event.preventDefault) {
a_event.preventDefault();
} else if (typeof a_event.returnValue !== "undefined") {
a_event.returnValue = false;
}
I have a defined a click which works as desired in all except two. I am binding the click event as follows :
$('#next_item').bind(myDown,function (e) {
config.scrolling = true;
config.scrollTimer = setInterval(function (e) {
if(!config.scrolling) return false;
if(myScroll.x >= myScroll.maxScrollX){
myScroll.scrollTo((config.itemWidth+config.itemBoxSpacing), 0, 400, true);
}else{
config.scrolling=false;
clearInterval(config.scrollTimer);
}
}, 100);
return false;
});
I am using iScroll 4. The #next_item is used to scroll the dynamically added div onclick. setInterval function() is used because on single click i want to scroll one div at a time and on mousedown i want the div to scroll till i do mouseup. Now the problem is on single click more then one div scroll at a time in blackberry playbook but works fine in ipad, android tablet and desktop browser including IE8. Also when i do mousedown in blacberry playbook the div keeps on scrolling till end and does not stop immediately on mouseup and for IE8 the div stops and scroll seems like setInterval is not working properly. What changes needs to be done to make this work in both IE8 and blackberry playbook
Update :
var isIOS = config.isIpad || config.isIphone || config.isAndroid;
var myDown = isIOS ? "touchstart" : "mousedown";
var myUp = isIOS ? "touchend" : "mouseup";
$('#next_item').bind(myUp,function (e) {
config.scrolling = false;
clearInterval(config.scrollTimer);
return false;
});
I have solved the blackberry problem. I had to just change one line of my code.
var isIOS = 'ontouchstart' in document.documentElement; /*This detects all touch devices*/
In my earlier code i was not detecting blackberry playbook and so it was receiving the mousedown event which caused the default touchstart event for touch devices to trigger along with the mousedown event and hence unexpected result.
I still could not solve the IE8 issue. Please anyone suggest what to do for IE8.