I have a grid of boxes that a user interacts with on a website. If they click a box, it changes color. There are quite a lot of boxes and I'd like it to be less tedious, so it would be nice to have the functionality be: if mouse button is down and you hover the box, it changes states. Any thoughts?
You can use the buttons property on the event passed to the hover callback to check what mouse buttons were pressed when the event was triggered.
For example, to detect whether the left button was pressed when an element is entered with the mouse, you could use:
myElement.addEventListener("mouseover", function(e){
if(e.buttons == 1 || e.buttons == 3){
//do some stuff
}
})
Here is a demonstration of this idea: http://jsfiddle.net/Ah6pw/
Hold down the left mouse button and move your mouse through different list items.
I found something simmilar. Clicking the objects in some space and then little interaction.
http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html (look for inspiration into the code)
Also these links could be usefull for you
jQuery is mousedown on mouseover
Detect left mouse button press
http://unixpapa.com/js/mouse.html
See onmousedown & onmouseup events.
Related
I need help to fix below scenario.
I have a div wrapped with a image. When I click with mouse on div section a small tooltip modal will be displayed to show the address. (imagine the example as having numbers on map, on clicking the numbers it will popup the address).
To have the same behavior with keyboard navigation, I have provided tabindex="0" for the div.
Now I am able to reach the div , but when I click by pressing enter / spacebar, I am not able to view the tooltip modal.
keydown events are also not working
Can anyone help me what could be the root cause. An example will be more easier to understand better
because probably you're using a tooltip plugin which works with click events by default, but you also need keyboards events to make it works with enter/spacebar.
Now, maybe that plugin supports them too, if you can tell us which one we'll find out ;)
Anyway a generic solution would be to
attach a keyboard event to your div
catch when user press enter/spacebar
trigger a click
Try this code:
$('#target').on('keyup', function(e){
//13 = Enter key, 31 == Spacebar key
if(e.keyCode == 13 || e.keyCode == 32) $(this).click();
})
See this example: JSFIDDLE
I have this code:
document.getElementById("1").oncontextmenu = function() {
return false
}
It disables the little window that shows after a right click (only on the button/image).
On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.
Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.
I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).
You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.
Source
Edit:
if (event.button === 2){
// run your function
}
That should be correct, as I have never used this before.
The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".
Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.
Finally, try with this code, instead of yours:
document.getElementById("one").addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('hello from right click');
return false;
}, false);
See https://jsfiddle.net/nnuyguat/3/
The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.
A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.
Its because of the oncontextmenu event. Remove it and it will work
I've configured Pointer Events through
pointerevents-polyfill.
There's an issue I have where I cannot differentiate between left- and right-clicks where right-clicking a nav item will do the same action as left-clicking instead of opening the right-click menu.
The specific event I'm using is pointerup.
Is there a way with Pointer Events to check if the event is a left- or right-click?
Looks like there is a property called button that has a value of 0 if it's the primary pointer (left mouse button).
I haven't used this library but from looking at the source and the W3C spec it would appear that way.
You can always print/debug the event and see what the property is.
I used event.type == 'click' (left) vs. event.type == 'contextmenu' (right).
The following code identifies “main button” type pointer events like left mouse click, touch.
if(e.pointerType !== 'mouse' || e.button === 0){
//Not mouse pointer or mouse pointer with left button
}
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
0: Main button pressed, usually the left button or the un-initialized state
1: Auxiliary button pressed, usually the wheel button or the middle button (if present)
2: Secondary button pressed, usually the right button
3: Fourth button, typically the Browser Back button
4: Fifth button, typically the Browser Forward button
I have a div with a onClick event, but it's not detecting the mouse because of an overlapping div. I can't put it below the 1st one, so changing the z-index isn't an option.
Is there any way to disable the mouse events on the 2nd div without the pointer-events? I need this to be cross-browser.
Requested sample. Right now all the event does is fire an alert:
<div class="buttonDiv" onClick="buttonAction()"></div>
<div class="filterDiv"></div>
You can try this:
HTML
<div class="buttonDiv" onClick="buttonAction(event)">
OUTER
<div class="filterDiv">INNER</div>
</div>
Javascript
var buttonAction = function(e) {
if(e.target.className == "buttonDiv") {
//code here
alert('got here');
}
}
Example: http://jsfiddle.net/aFRcd/1/
Basically on the click, you send along the click event and then you can see which div was actually clicked using event.target
You'll notice in the example that clicking on OUTER fires the alert whereas INNER does not.
The only solution I could find was having a Mouse Move event attached to the canvas and compare the coordinates of the button to the position and dimensions of the buttons. It's a pain, but at least it does the job
I currently have three Divs and only one of them is in focus at a given time. All of them line up in a film strip fashion. When I click a DIV not in focus, the current one moves to the left or right (depending on the direction) and the new one comes into focus.
The divs can have content that has links. So my problem is that upon clicking on the divs not in focus, if I happen to click on a link, the event is captured. Is there anyway I can disable event detection for divs not in focus?
What I am looking for is something like:
if(div not in focus)
disable all links
if (div comes into focus)
enable all links
Assuming that the active <div> has a class of Active, you can do it like this:
$('.Container div:not(.Active) a').live('click', function(e) {
return false;
});
Sounds like a selector problem. Can't you give those divs unique ids or classes to bind click events individually?
In your event handler, use
if (event.target.tagName == "a") // where `event` is the 1st argument passed
event.preventDefault(); // to the handler
This will prevent the default action if a link was clicked and still allow the div to move into focus.