I asked here (How to detect right click + left click) how to detect when user right click hold it and click on the left button of the mouse
I did like the first answer but its not working as expected,
First in my code I create table and td's, and then I add events to every td like that:
td.setAttribute('onmousedown', "handleMouseDown(event)");
td.setAttribute('onmouseup', "handleMouseUp(event)");
td.setAttribute('onclick', "checkCell(this)");
I dont use addEventListener` because IE < 9.
The two functions to handle the events is:
function handleMouseDown (e) {
if (e.button == 2) rightClicked = true;
}
function handleMouseUp (e) {
if (e.button == 2) rightClicked = false;
}
First its dosent work good, the handleMouseUp dosen't always set rightClicked to false
when I was clicked on left button its dosent set rightClicked to false when I release the right button
so I add to checkCell if rightClicked is true so set it to false.
if (rightClicked) {
rightClicked = false;
Now In the first time I click right click and left its work, but after that its not work anymore unless continue to press left click and after that sometimes it work
Sometimes its dosent work even the first time
My all code in jsfiddle: https://jsfiddle.net/e4pf78zu/
Its dosent work fine there the functions shown in the console as undefined I dont know why can someone fix that for me thanks
This doesn't work for a couple of reasons.
First of all you are setting the event listeners for each cell in a very weird way, not to mention you are doing it wrong.
td.setAttribute('onmousedown', "handleMouseDown(event)");
Why didn't you simply do
td.onmousedown = handleMouseDown;
Also, you are doing handleMouseDown(event), which I am pretty sure is wrong.
In general, please don't add your event handlers like this.
I dont use addEventListener` because IE < 9.
IE9 and below don't support addEventListener but they do support attachEvent which is probably better than doing .on<EventName> = function(){}, or what you are doing there currently.
Moreover you can even simulate addEventListener in these browsers as well. Simply use this polyfill here, and in general read about addEventListener
the handleMouseUp dosen't always set rightClicked to false when I was clicked on left button
rightClicked is supposed to become false only when you release the right button, so that works as expected.
its dosent set rightClicked to false when I release the right button
Well, based on the code you provided, that's impossible. The code pretty clearly says
if (e.button == 2) rightClicked = false;
so I add to checkCell if rightClicked is true so set it to false.
This was probably not needed. Resolve your other issues first and then see if you really need to do this.
Related
I have an image gallery with various controls. One of the controls is a basic delete function, to delete you click and hold for approx 1 second to get a confirmation asking if you want to delete. All works fine, it's just that on mobile devices it often causes the "Save Image As, etc" menu to pop up which has to be closed before the intended action can be performed.
I've read about various fixes but none of them seem to work with current versions of Chrome mobile on my Galaxy S5, and the most recent answer I could find was from 2013.
I found one saying that the context menu was it's own function, so I tried something like this:
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
But it did not prevent the context menu from showing on my S5. As I said, I'm hoping to find a solution to prevent it from coming up on certain items, not the entire window.
Thanks to Tasos for the answer
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
I (re)post the answer here because at first, I haven't seen it was in the question :)
So juste use this code, with stopImmediatePropagation :
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};
Chrome :
Following code is working in Chrome.
$('.links').click(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Firefox :
Since above code doesn't catch middle button / mouse wheel click event in firefox, I tried following which is able to catch mouse wheel click event.
$('.links').mousedown(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Above code prints 2. But return false; is not working.
When I replaced console.log with alert then it works. But I can't & don't want to use alerts.
I tried mouseup, mousewheel events also. But it didn't work.
I tried attachEvent also but, I got an error(attchEvent is not a function).
I am using below mentioned js files :
jQuery-1.10.2.min.js
jquery.easyui.min.js
jquery-ui.js
jquery.ui.core.js
You can refer below links for more clarity.
jsfiddle.net/nilamnaik1989/vntLyvd2/3
jsfiddle.net/nilamnaik1989/2Lq6mLdp
http://jsfiddle.net/nilamnaik1989/powjm7qf/
http://jsfiddle.net/nilamnaik1989/q6kLvL1p/
Following are some good links. But anyhow it doesn't solve my problem.
event.preventDefault() vs. return false
event.preventDefault() vs. return false (no jQuery)
http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html
I need your valuable inputs.
All click default actions should be cancelable. That's one of the points of this important event. However, certain browsers have exceptions:
IE 5-8 won't prevent the default on text inputs and textareas.
IE9/10 & Opera incorrectly un-check radio buttons when you click on another radio in the same group. It correctly doesn't check the new radio.
IE 5-8, Firefox, & Opera won't prevent the default on select boxes.
Firefox & Chrome feel that one radio button must be checked. If all are unchecked they’ll check the first one you click on, even if the default is being prevented.
See Events - click, mousedown, mouseup, dblclick for some more information.
I had the same issue with firefox, related with
preventDefault();
Everything was working well in Safari, Chrome, Opera and even in IE9 (not kidding)
But, after a lot of reading, I saw that the site was using and old jquery version (1.10), then updated to the latest one (2.1.4) the action was canceled even in Firefox.
Another thing to consider is that I used a variable named "keyPressed" like:
var keyPressed = event.keyCode || event.which || event.charCode
So it was easy for each browser to recognize the key event.
Hope this help!
I have faced the similar problem in FF on middle click.
The following script fixed me the issue and it works fine in FF as well.
$(document).on('click', $(".content"), function(e) {
if(e.button==1) {
e.preventDefault();
return false;
}
})
I have a div that is draggable. The "splitter" that is used for dragging it / toggling it, it's supposed to allow expanding and collapse only on doubleclick. (Or simple drag and expand).
The functionality works fine, but once the div is in the collapsed state, it repositions/opens up to some 10px width, when just 'clicking' on the splitter. I.e, single click/mousedown.
I have tried stopEvent, return false, also all other possibilities of fixing it, but it won't stop from expanding on single click
This is not supposed to happen. Any help would be appreciated.
To solve this problem I think you will need to add some extra state to your DOM node containing a flag if the object moved or not. If it really moved, then the click event should not be fired.
An example of adding the state:
lang.mixin(domNode, {
moved: false
});
Then, when the Move event is fired, you set the flag to true, for example:
moveable.on("Move", function(mv, pos, evt) {
if (evt.target.moved === false) {
console.log("Drag detected");
}
evt.target.moved = true;
});
In the click event handler you will have to verify if the flag is changed to true or not and put it back to false (for the next moves). For example:
on(domNode, "click", function(evt) {
if (evt.target.moved === false) {
// Execute your logic here
}
});
Of course, this isn't the most elegant solution (but it works). The most beautiful solution would be that you extend the Moveable yourself and make it work to your needs.
I tested it out with a JSFiddle, which you can see here.
We have a select2 dropdown in a row (just a div) and we need to be able to click that entire row to trigger the dropdown. I have no problem showing it, but trying to hide it has become a problem, and I'm wondering if my logic is flawed somewhere. select2 AFAIK doesn't have a toggle method on the version we're on, so I have to manually use it's open and close methods. This is what I tried.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
else {
$(this).find('select.interface_dropdown').select2('open');
}
});
This causes it to open properly, but when you click to close it, it closes on mousedown but reappears on mouseup.
Is there someway I can get it toggling properly?
Will you post relevant HTML? It's hard to understand what you're doing without seeing content.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
_dropdown.removeClass('select2-dropdown-open');
_dropdown.select2('close');
} else {
_dropdown.select2('open');
_dropdown.addClass('select2-dropdown-open');
}
});
It looks like you forgot to add/removethat class, maybe this will work better? Again, I'm kind of feeling around in the dark here without seeing your content.
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
in later versions of select2 (3.3+ iirc) this will never get triggered because when opened select2 creates a transparent mask over the entire browser and listens to click events. when the mask is clicked currently opened select2 is closed. this was the only reliable way to close a select2 when the user is ready to do something else.
The proper way is:
$('select').data('select2').toggleDropdown()
Note this issue may not apply to the general public, as it does not occur unless you're a fast clicker. (150-200ms/click) The reason I'm posting this issue is because my application has a form with 20+ checkboxes next to each other, and after extensive research I've found no related questions on this matter.
Here's a simplified scenario - 4 checkboxes and 4 labels, one for each checkbox id:
[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4
Assume in each case all CBs are unchecked.
Expected Behavior:
I click on the 4 CBs in rapid succession, they will all become checked. (true)
I click on the 4 Labels in rapid succession, and the corresponding CBs become checked. (only true for Chrome, but still not optimal)
Actual Behavior for case 2 on Win 7 (clicking on labels, because as you know, labels are big and style-able, and the checkboxes are tiny and OS-dependent):
(In Firefox 19) CB2 and CB4 are left unchecked, and while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
(In Chrome 26) All CBs get correctly checked, but while going down the list the word "Label" gets highlighted for Label 2 and Label 4, as if I double-clicked on them.
(In IE 10) CB2 and CB4 are left unchecked, but no false highlighting.
The erroneous behavior could be justified if the clicks are on the same element. In our case those are clearly unique checkboxes with different IDs and Names. So the results are wildly unexpected.
So my question is:
Is there a way to disable firing the double click event when I rapidly click on the different checkboxes, but yet still check them with fast single clicks?
The closest I've come to is the following script, which interestingly made Firefox behave like Chrome, and Chrome behave like Firefox:
jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
console.log('ugly hack fired');
$(this).click();
event.preventDefault();
})
Finally got one very ugly hack that worked for all the browsers, hopefully this will help anyone else who comes across the problem:
Disable selection with css because doing it in JS is simply too inefficient:
.form_class input[type=checkbox] + label{
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
Prevent ALL clicking in JS, and manually do what clicking should do:
jQuery(document).on('click', '.form_class input:checkbox+label', function(event){
// Assuming label comes after checkbox
$(this).prev('input').prop("checked", function(i, val){
return !val;
});
event.preventDefault();
})
This would do it-
$("input[type='checkbox']").dblclick(function (event)
{
event.preventDefault();
});
Try this:
$(document).on('dblclick', 'input:checkbox, label', function (event) {
event.preventDefault();
// Your code goes here
})
OR
$("input:checkbox, label").dblclick(function (event) {
event.preventDefault();
// Your code goes here
});
OR
$('input:checkbox').add('label').dblclick(function (event) {
event.preventDefault();
// Your code goes here
});
I was also facing a similar issue which had me spend whole night on how this can be fixed for checkbox. I was also listening to the 'dblclick' event to prevent any action from happening on double click on a checkbox.
ex:
#(".some_class").on("dblclick",function(event){
event.preventDefault();
});
But the problem here was that it was firing the event after the action was done. So all the damage was already done.
There is a very simple way to tackle this problem that is by listening for the event 'change' instead of listening to 'click'. In this was we are triggering the event when there is a state change from check to unchecked or from unchecked to checked and not on click or double click.
#(".some_class").on("change",function(event){
event.preventDefault();
});
$('.checkbox_class').click(function(event){
if (event.ctrlKey){ event.preventDefault();
//rest of the code
seems to work