I'm able trigger mouseup and mousedown events. For triggering I'm using:
$(document).ready(function(){
$("html").mouseup(function(){
console.log("mouseup");
});
$("html").mousedown(function(){
console.log("mousedown");
});
});
My issue is, If I'm clicking on white space also my code was triggering. So, I want to trigger while user clicks on HTML elements only not on white screen. Is there any possibility to do this?
I was checking you question and realize that you want something generalized. So what I have done is, I have added a condition in which if the target is html, your further code will not execute(only event will be called).
$("html").mouseup(function(event){
if(event.target !== $('html')[0]){
console.log("mouseup");
}
});
$("html").mousedown(function(event){
if(event.target !== $('html')[0]){
console.log("mousedown");
}
});
Write now you adding the events on the whole html div. This means everything wrapped within <html> ... </html> tags will respond to that event. Fix it to the name of the tag of the particular div you want to respond to the event.
For Example for a button it will become
$('button').on('mouseup', () => {
console.log('mouse up on button')
})`
You can use * selector for it.
$(document).ready(function() {
//$("html").find("*").mouseup(function(e) { or
$("html *").mouseup(function(e) {
console.log("mouseup");
e.stopPropagation();
});
//$("html").find("*").mousedown(function(e) { or
$("html *").mousedown(function(e) {
console.log("mousedown");
e.stopPropagation();
});
});
Related
I've got the following multiple HTML div : <div class="draggable"></div> (that are generated through a loop, they all share the same class).
When clicking on the div, it should add a class("verso") when pressing a keyboard key (here: right and left arrows). It does work, but how do I integrate the focus out to be able to deselect this div and select another? Something like that does not work.
$(".draggable")
.draggable()
.click(function(){
$(this).is(":focus", function() {
$(this).focusout();
});
$(this).not(":focus", function() {
$(this).focus();
});
$('.draggable').on('keyup', function(e){
if ((e.which == 39) || (e.which == 37)) {
if (!$(this).hasClass('verso')) {
$(this).addClass("verso");
}
else {
$(this).removeClass("verso");
}
}
});
"that are generated through a loop, they all share the same class"
When HTML is generated, it's mostly not in the DOM when setting Click handlers.
Try using
$(document).on('click', '.draggable', function(){})
To set the click handler on the document
Wrap your code in
$(document).ready(() => {
// Here goes your code
});
This will make sure scripts will be run only after DOM is ready
I have a button which creates a pulldown in which you can select several categories.
Now i want this to close automatically when i click outside the pulldown.
Something like a lightbox or modal popup which closes if you click anywhere else on the page.
Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)
This is the code of the button:
$(function(){
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Is this possible?
thanks
Using jquery this is the code I used for a similar case scenario sometime ago:
$(document).click(function(event) {
if(!$(event.target).closest('.pulldown').length) {
if($('.pulldown').is(":visible")) {
$('.pulldown').slideUp()
}
}
})
You can read more about this in the original post How to detect a click outside an element? submitted by Art.
I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:
$("body").click(function(event) {
if (event.target.id != "browse-btn") {
// Do something when there's a click outside of #browse-btn
// and the element you want to hide is currently visible
}
});
You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:
$(function(){
var hidePulldown = function(){
$('#browse-btn').removeClass('active');
$('body *').unbind("click", hidePulldown);
}
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else {
$(this).find('span').html('▼');
$(document).on('click', 'body *', hidePulldown);
}
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Also, the
$(document).on('click', element, function(){function body})
is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
This is what worked flawlessly for me after reading some of the answers here:
$(document).click(function(event) {
if(!$(event.target).closest('#menucontainer').length &&
!$(event.target).is('#menucontainer')) {
if($('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
}
})
Thanks for pointing me in the right way!
i just wanna ask if there's something like "if clicked arround" in jQuery, i mean, if clicked any element in the page except for one element, or if there a way to make that easily.
You can try this:
$(document).on("click", function(event) {
if($(event.target).parents().index(yourElement) == -1) {
// your code here
}
});
Yes you can use .not()
event.stoppropagation
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('#divID').not('#ElID').click(function(){
//* code here */
});
Or
:not()
$('#divID:not("#ElID")').click(function(){
//* code here */
});
Start Reading jQuery API Documentation and Learning
Updated After OP's comment.
Fiddle Demo
event.target and .is()
$('#divID').click(function (event) {
if (!$(event.target).is('#ElID')) {
alert('Work');
}
});
Fiddle Demo
Works on click anywhere except element with id ElID
$('html').click(function (event) {
if (!$(event.target).is('#ElID')) {
alert('Work');
}
});
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I have a script here that if i click on it drops down, as well on if i clickoutside it drops down. But i want to make it so that if i click on bottom it scrolls up. For some reason it doesnt work here. It only scrolls up if i click outside the box.
Heres an example. http://jsfiddle.net/w8mfx/
If i click on bottom it wont scroll up only if i click on outside. But i want it to work both ways.
$(document).ready(function() {
$('#bottom').click(function(event) {
event.stopPropagation();
$('#content').slideDown();
});
$('html').click(function(e) {
//alert(1);
if (e.target.id != 'bottom') {
$('#content').slideUp();
}
});
});
http://jsfiddle.net/w8mfx/7/
I added:
$('#content').click(function (event) {
event.stopPropagation();
});
so the user can click on the #content element and not trigger the slide function. That also means that the event handler for the html element can be simpler:
$('html').click(function(e) {
$('#content').slideUp();
});
In the jsfiddle you may notice I cached the $('#content') selector in a variable since it was being used in more than one place.
Use slideToggle(). http://jsfiddle.net/w8mfx/5/