I know that hovering over an element causes another element to get a new class added to it. How do I check what and where this eventListener is on Chrome? The Event Listeners tab in Chrome just list some listeners on the document instead of any specific element.
To view event listeners for a single element you have selected, make sure you uncheck the 'Ancestors' box in the event listeners tab. If checked, you will see all event listeners for the ancestors of that element - which may be what you are seeing now.
Hovering doesn't really add another class to an element, it triggers a hover state for the element which can be targeted with a CSS pseudo-class selector. This is not an event listener but there are event listeners that can be added to detect the mouse pointer over the element (see end of answer). Here is an example of targeting the hover state of any paragraph tag with the :hover pseudo-class selector:
p:hover {
background: blue;
color: white;
}
<p>Hover me</p>
<p>Or hover me</p>
In Chrome DevTools, you can force a hover state on the element to view its hover state behavior. To do this click the :hov button at the top right of the styles pane, and then check the :hover box. If there are any pseudo-class :hover styling rules for that element, they will now be displayed in the styles pane and the element will change accordingly in the viewport.
There are event listeners such as 'mouseover' and 'mouseout' which, when used together, will emulate the hover state behavior. Note, however, that these are independent of the hover state - so forcing a hover state in DevTools will not cause these event listeners to trigger. If these event listeners are present on the element you are inspecting, they will show up in the event listeners tab - just remember to uncheck the 'Ancestors' box if you are inspecting a page with a lot of event listeners.
If you have an event listener attached to the element, it will be displayed in the Event Listeners tab (see screenshot).
Just a hover of an element may not appear as an event, as it's a css transition.
Try adding an event listener to an element:
document.addEventListener('DOMContentLoaded',function(){
var el = document.getElementById('someId');
el.addEventListener("click", hoverMe, false);
function hoverMe() {
console.log('hovering');
}
});
So, if I understand correctly: given elements A and B, when you hover over B, a class gets added to A. Then the class gets removed when you hover away.
Since the class gets applied to a different element, it sounds like that is being implemented with mouseover and mouseout events, not the CSS :hover pseudo-class.
var a = document.getElementById('a'),
b = document.getElementById('b');
b.addEventListener('mouseover', function () {
a.classList.add('hover');
});
b.addEventListener('mouseout', function () {
a.classList.remove('hover');
});
.hover {
background-color: red;
}
<p id="a">element that the class get's added to</p>
<p id="b">element that you hover over</p>
In which case, select the element that you hover over in the DOM Tree of DevTools:
And then check the mouseover and mouseout events in the Event Listeners tab:
Clicking the js:23 and js:19 links lets you inspect the handler definitions.
I have div with a button inside it. I want when a user clicks on the div (outside the button's rect) to initiate the button click with its animation. Is there any simple css solution, without javascript?
In my web UI, i would like to have totally different response to mouse and touch events in the same screen area. I see the solution to position a blank container (either div or SVG rect) over the area in order to capture only the touch events for the entire space, while mouse events would reach out to the specific objects underneath.
The question is: how do i make this container sensitive to touch events (as if it had CSS property pointer-events: visible;) but transparent for mouse event (as if it had CSS property pointer-events: none;)?
Unfortunately, the mentioned CSS property modifies the behavior together for mouse and touch.
Thanks!
So, I have a component based on canvas, and within that component I have two images. I have the component listen for a click and when that event occurs one image goes transparent and the other becomes visible.
This part works perfect.
Now, on clicking that component, I also want to do something to the parent canvas, I already have this working for more basic types (image, canvas, text, etc) but the problem with my component is that the click event has the internal image as the target, so what I want to happen to the outside canvas is happening to the canvas of the component.
How do I make my component as a whole the target of any clicks on it?
3.5 SDK
You can make the outer component the target of the clicks by setting mouseChildren = false on the outer component. Clicking anywhere within the component (including on any of the sub-components) will then set the event target to the outer component. Hope that helps.
I handled this by adding a click handler to the children that would stop immediate propagation, then dispatch a click event from the outer component. Wade's solution is much better.
I have an asp.net usercontrol that contains a jQuery UI Dialog Control.
All works as expected execpt the grey tranparent overlay (to make the form modal) only appears on the hidden div below the form where the dialog is triggered from.
Is it possible to target this overlay to the parent div? or is this not the right solution.
I have tried the blockUI plugin (and removing the Dialog style to prevent its overlay showing), but although it "looks" right on screen it disables all the controls including the ones in the dialog popup.
Any ideas?
Added: Screenshot
alt text http://www.freeimagehosting.net/uploads/e0555a0ec5.jpg
It might be a z-order issue. Can you post a screenshot to make it easier to understand. Also please post the high level HTML you are using on the aspx page.