How to create click event handler inside mouseover event handler? - javascript

I'm trying to build some kind of element inspector (like in Chrome/FF).
Flow is as follows:
You click 'Start inspecting' button.
You hover over necessary element.
You click on that element.
You should see that element in console.
JSFiddle example
Here is the code:
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
$(this).on('click.INSPECTOR', function(e){
$('section *').off('mouseover.INSPECTOR');
$('section *').off('click.INSPECTOR');
$('.hovered-element').removeClass("hovered-element");
console.log(e.target);
});
});
};
The problem is: each time I hover over some element - click event handler is attached to it. So if I hover over p element 5 times, and then click on it - I will see 5 console.logs instead of 1.
I tried to implement it using mouseenter/mouseleave, but faced the issue, that each element can be hovered only once - another JSFiddle example
So how can I improve my code that no matter how many times I hover over the element, it will have only one click handler?
Thanks in advance, any help will be appreciated!

Did you try moving the onclick handler outside the mouseover?
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
}).on('click.INSPECTOR', function (e) {
$('section *').off('mouseover.INSPECTOR click.INSPECTOR');
console.log(e.target);
});
};
DEMO

I'd suggest breaking it up into parts. The user clicks on "Start Inspecting" and your page goes into inspecting mode where it adds css dynamically to every element that is hovered over so it looks similar to Chrome. When you click on an element in inspecting mode then you can handle it how you want. This way you only have to add one hover and one click handler per element, thus only triggering the event once.

Related

Jquery panel re-opens when closed

When i made an exit button for a panel that goes full size when you click it, once the window "return to original size" animation is done. it does the "fullscreen the window" animation ? here is the JSFiddle link so you can look at it.
because for jsfiddle links you need a code section, here it is
http://jsfiddle.net/txpmrv47/
Use:
$('#exit-button').click(function (event) {
event.stopPropagation();
// The rest of your code.
});
Explanation:
You have a nested element, #exit-button, with a click event handler. It's parent also has a click event handler. Due to event bubbling, the parent click handler gets called when the child element is clicked.
Hopefully that helps.

prepend images on click - prepend just once then stop

$('button').click(function() {
$('.img-container').prepend('<img src="images/image.jpg">')
});
I have a one page design and a gallery section that becomes visible on click.
I do this by prepending the imgs. Here you can see how I add 1 image. The issue is that the more you click the more elements it creates.
Is there any way to make it create the element just once? Then somehow stop prepending.
If you handler is as simple as given then you can use .one() to register the handler so that the event handler will get executed only once
$('button').one('click', function() {
$('.img-container').prepend('<img src="images/image.jpg">')
});
Demo: Fiddle
Another option is to check whether an image exists
$('.img-container').not(':has(.someimage)').prepend('<img class="someimage" src="images/image.jpg">')
Demo: Fiddle

When user clicks on one element, trigger a click on another.

I have some links on my page and I need to programmatically perform a click on an element when the user clicks on another element. For example, when I click on element A, jQuery should perform a click on element A2.
I don't know what this is called, technically, and I'm having trouble finding out how to do this. Is this possible in jQuery?
Attached an event handler to your first element (#elementA in the example below) and then trigger a click event on the second element (#elementB below)
$("#elementA").on("click", function (e) {
$("#elementB").click();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/Dar8J/
Use following to do trigger event,When div1 is clicked , Trigger click event for div2
$("#div1").click(function (){
$("#div2").trigger("click");
});
Working demo http://jsfiddle.net/MSSbT/
You can trigger a click via click()
http://api.jquery.com/click/#click

JavasScript changing DOM in mouse-event

I have 2 DIVs and in each DIV there's a Button which does something on click.
Now I've added a piece of code to bring the DIVs to front when they get a mousedown. Which works very well. The problem is, that they swallow the mousedown of the inner button... The inner button can only be clicked by double clicking it.
http://jsfiddle.net/nUtz6/
$('div').mousedown(function (event) {
$(this).parent().append($(this));
});
how could I solve this problem? I did it this way because I don't want to increment the z-index of the CSS property to some magic number everytime I click the div. I read that jquery also does the DOM manipulation trick.
The problem seems to occur because I change the DOM right before the click-Event of the button. If I don't do anything in the mousedown, everything works fine.
Just check that the DIV is actually the target of the event :
$('div').mousedown(function (event) {
if (event.target.tagName.toLowerCase() != 'button')
$(this).parent().append($(this));
});
FIDDLE

jQuery - click (almost!) anywhere to hide div

I have a search input box that appears upon rollover of a button. Rather than having its own close button I would like to be able to click anywhere on the page to re-hide the Search.
If I attach a click handler to the document this works fine but the problem being is that the search itself is part oofthe document. So if you click the input (which of course you need to do in order to type in a search) the search disappers.
I had hoped I'd be able to write a function soemthing like this...
$(document).not("#search").click(function(){
$('#search_holder').fadeOut('fast');
});
i.e apply a click handler to the entire document APART from the search. Unfortunately that doesn't work.
so whats the answer?
thanking You in advance
Cancel the click event from propagating when it originates from the button you care about:
$("#search").click(function(event){
event.stopPropagation();
});
You can do it by stopping the click event from bubbling, like this:
$(document).click(function() {
$('#search_holder').fadeOut('fast');
});
$("#search").click(function(e) {
e.stopPropagation();
});
event.stopPropagation() prevents the bubble from going any higher, all the way to document triggering the .fadeOut(), everywhere else (by default) will bubble to document, causing the fade to occur.
Try this Its working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});

Categories

Resources