I have a online Slide Show I'm working on using jQuery. I have use $(document).click event to detect when a user clicks on the page to know when to show the next bullet point in the slide or to move to the next page.
The problem I'm running into is my job had me insert a comment box on the bottom of the page and when ever someone clicks on the comment box or the save comment button it also fires the click event for the page.
Is there a way I can have the click event for the entire page but ignore it when someone clicks in the DIV the Comment box/Save button are in?
You will most likely need to stop the propagation of events in your Comments div using the event object's stopPropagation() method:
$('#comments').click(function(e) {
e.stopPropagation();
});
if that doesn't work try using preventDefault():
e.preventDefault();
Related
I am using the autocomplete js from here:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
It all works fine but when I click one of the suggestions
A click event fires on the body element which then shuts down the whole drop down menu.
(this is by design as in every other case where there body is genuinely clicked I want the drop down menu to disappear)
When I check the event that is firing on the body the path is showing that it is starting at the body element. I have put event stop propogation functions on all of the divs created in the drop down menue including the ones created by the autocomplete. It doesn't seem to be coming from them - it is if it the click is firing the click event of the suggestions divs but additionally of body underneath as an entirely separate click event.
How can I stop this from happening?
Many thanks.
SOLUTION:
The autocomplete javascript code from pixabay was capturing the mousedown event - and then setting the display of the suggestions to none. This meant that when the click event fired the suggestion div was no longer there causing it to fire a click on whatever was underneath the click. So I changed the mousedown event in the autocomplete code to click and this has fixed the problem.
This seems like a bug in their code? I can't see a reason why you'd ever want the click event to be fired on what happens to be underneath a suggestion?
I have an issue in IE that is causing my autocomplete list to close when I click on the scrollbar, when the autocomplete element is on a dialog. It works fine for my other autocomplete inputs that are on the main page.
How can I add a click handler to detect what was clicked and cancel the close function if the target of the click was the scrollbar of the autocomplete.
Id love to just comment but since my renown isnt high enough here:
Try going trough this post it might contain solution for you.
Clicking on a div's scroll bar fires the blur event in I.E
I have a small query, I have a multiple dropdown box in my form. after selecting multiple value, if I click on outside the multiple drop down box page should reload. How can I make it happen using javascript. I have used "onmouseout(reload.form)" option but it is not working. Please help me on this.
Thanks
Ranjith
In this scenario, you might need click event rather mouseout(which is not on click but when mouse loses the focus).
For more details about click outside the element refer the below link
Javascript Detect Click event outside of div
So once you capture the click out event, you can just trigger the page load using
window.location.reload(true) or window.location.reload(false)
true or false depends on you need to load from cache or server.
Hope it helps!!
Seems like you should really connect to the change() signal on the select box instead. By depending on the mouse event, you will prevent people form using your form with the keyboard only, for instance. onmouseout will also not work on mobile devices
I'm working on some tweaks for a web page, I'm using MVC and jQuery.
Basically I have some help icons on my page, when the user clicks on the icon, a bubble appears with a help description.
I have this code in my JavaScript for that page:
AddHelpIconMouseEvents: function(element, msg, divForm) {
$(element).live('click', function(event) {
if (event.type === "click") MyClassHelper.showHelpIconBubble(msg, divForm, event);
});
$(document.body).click(function() { $(divForm).hide('fast'); });
}
As you can see I'm using the document.body.click event to capture any click outside the help bubble, and hide the bubble.
Now consider this situation, I click on the help icon and the bubble is displayed, if I click anywhere else on the page, the bubble disappears as expected, but the problem I have is, if instead of clicking on a blank space on the page I click on a link, the link displays another section of the page, hides the section that contained the help icon but the help bubble does not disappear, it remains displayed.
This doesn't happen on Firefox, in which I can click on a link or on an empty space and the bubble disappear.
I think this may be related to the way in which IE handle events, I think I read something about it, so I wonder if anyone knows how can I fix this, I think I can put some code on the links and validate if the bubble is visible, hide it, but I don't like the idea, I think it is not a good solution, I wonder if there is another better way to handle this.
You can make a function which checks for the help bundle to check in DOM if it already exists. If so remove it from DOM. You have to call this function on every other link.
I am trying to alert the user when they leave the shopping page with cart filled up. And also get feedback or the reason for their exit.
I need to get event source id because to know whether they exit my site or navigate by clicking a link in my page.
Any one help me on this...
It's not possible. You should be able to catch if the user clicked a link to leave the page by manually setting up a listener event on each of them, but the browser does not give you any information about what led to the unload event. If it was an event ouside the document ("Back" button etc.), you're out of luck.