I want to prevent click event but e.stopPropagation() doesn't work.
I'm trying to write something like Jtable . I use div as pagination buttons(1) and another element is delete button.
I need to disable pagination buttons when delete confirmation box is popping up . After click del or cancel "I want my pagination buttons work again".
Is there any solution?
function deleteit() {
$(".del").click(function() {
$(".divbutton").click(function(e) {
alert(1);
e.stopPropagation();
});
}
$(".deletebtn").click(function() {
deleteit();
});
$(".divbutton").click(function() { // I want to prevent this from click
//ajax send and display data
});
I know that I should use input disabled instead of div, but I need to use div.
edit:add image to make it understandable.
Instead of preventing the click handler... remove the registered handler using .off(), here namespaced event name is used because we want to remove only a very specific handler
function deleteit() {
$(".del").click(function () {
$(".divbutton").off('click.delete')
})
}
$(".deletebtn").click(function () {
deleteit();
});
$(".divbutton").on('click.delete', function () { // I want to prevent this from click
//ajax send and display data
});
Why your code is not working? because stopping propagation will prevent the bubbling up of the event but in your case both the event are registered to the divbutton so both of them will get triggered even if propagation is prevented.
Another way is to use stopImmediatePropagation() even that is not possible here because your delete registers the handler later and it will get executed only after the first one is called
Related
Really stuck on this problem I am having.
The problem :
I have a button which will trigger a reorder method. This reorder method is dependant on the click event that is binded to the reorder button.
I want to add a confirm step using a overlay, inside the overlay there is a confirm button which will then pass the original button event.
'reorder-overlay-confirmation': function (event) {
var self = this;
$(self).find('.reorder-confirm-btn').click(function (e, event) {
e.preventDefault();
_reorder(event);
});
},
How can I pass the initial event into the confirmation button.
I tried passing it as an argument but it is null whenever it calls the _reorder() method.
How can I pass the first click event as an argument of my second confirmation click event?
Note : I cannot use jQuery confirm as there is some overlay functionality existing that I must use.
Thanks
You could pass it as extra parameter in the event data so it will be accessed via e.data like :
$(self).on('click', '.reorder-confirm-btn', { first_event: event }, function (e) {
e.preventDefault();
_reorder(e.data.first_event);
});
Hope this helps.
I have an app where clicking a link brings up a modal. In the modal is a form. I need to monitor for that form's submission.
I'm attaching a click handler in my JS like so:
$('.vex-dialog-form :submit').click (event) ->
alert "hi"
That alert isn't firing, I believe it's because I need to attach some kind of event handler for that modal loading then put the submit event inside of that.
Any suggestions on how to go about this?
you need event delegation for dynamically added DOM. use .on():
$('.vex-dialog-form').on('click',':submit',function(){
alert("hi");
});
if parent .vex-dialog-form is also getting added dynamically, then use:
$(document).on('click','.vex-dialog-form :submit',function(){
alert("hi");
});
Try this way:
$(document).on('click', '.vex-dialog-form :submit', function(){
alert('hi');
});
In this case document is waiting for click and after it gets clicked, jQuery finds out whether your submit button is clicked or not
I use Bootstrap3 Modal. I bind the 'hidden.bs.modal' with a handler, but in a special case I need to just close modal without call the hidden handler, after that, next time user open the modal and close it again, then hidden handler get called as normal:
//suppose modal is shown, unbind first to prevent the handler run
$('..').unbind('hidden.bs.modal');
$('..').modal('hide');
//rebind the handler
$('..').bind('hidden.bs.modal',function(){//...});
But seems not to work: it still calls the handler.
Is there a way to achieve this?
Thanks
I felt same problem earlier and used this hackish to prevent calling hidden callback in some cases. hope it will help you
function close_modal_without_callback() {
$('#myModal').off('hidden.bs.modal');//`off` to remove event handler attached with `on`
$('#myModal').modal('hide'); // hide modal
setTimeout(function() { //to add little delay to reattach the event
$('#myModal').on('hidden.bs.modal', function(e) {
hidden_handler(); //handler function
});
}, 1000);
}
I have a button that clears a list, the click on this button shows a dialog that asks for validation (Yes/No). What I want is to disable the "Clear" button after clearing the list (Click on Yes). Here's my code :
$('#clearBtn').click(function() {
$('#alert5').show();
$('#bg').show();
$('#Yes').click(function(){
$('.list1').empty();
$('#clearBtn').disable(true);
$('#clearBtn').click(function(e){
e.preventDefault();
});
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
});
the preventDefault() function doesn't seem to work.
First never nest event handlers.
$('#cleatBtn').click(function () {
$('#alert5').show();
$('#bg').show();
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
If you just want to disable then use the following syntax
$('#cleatBtn').attr('disabled', true);
Remove the innermost event completely.. That is not required.
Use on to bind the events, if you want the button to be enabled but turn off the event handler using off
One more option you have is to apply a class to the button when you press yes and execute the code only when the class is not present.
$('#cleatBtn').click(function () {
if( !$(this).hasClass('active')) {
$('#alert5').show();
$('#bg').show();
}
});
$('#Yes').click(function () {
$('.list1').empty();
$('#cleatBtn').attr('disabled', true);
$('#cleatBtn').addClass('active');
$(".alert").fadeOut(250);
$(".alertbg").fadeOut(250);
});
To disable a button, call the prop function with the argument true on it:
$('#cleatBtn').prop("disabled", true);
e.preventDefault(); is the correct way of cancelling events. Some older browsers also expect a return type of false. Which I think will cause jQuery to call preventDefault()?
Here's a good answer: What's the effect of adding 'return false' to a click event listener?
I think your structure looks a bit odd. you don't need to attach click events within a click event.
Just attach them all separately on document.ready events. At the moment they are nested, then go back to trying to cancel your event. The dom tree might be confused by the way the events are nested.
Hope that helps.
Whats the easiest way to temporarily disable all mouse click/drag etc events through javascript?
I thought I could do document.onclick = function() { return false; }; ...etc, but that's not working.
If the objective is to disable click on the whole page then you can do something like this
document.addEventListener("click", handler, true);
function handler(e) {
e.stopPropagation();
e.preventDefault();
}
true argument in addEventListener would ensure that the handler is executed on the event capturing phase i.e a click on any element would first be captured on the document and the listener for document's click event would be executed first before listener for any other element. The trick here is to stop the event from further propagation to the elements below thus ending the dispatch process to make sure that the event doesn't reach the target.
Also you need to stop default behavior associated with event target elements explicitly as they would be executed by default after the dispatch process has finished even if the event was stopped propagating further from above
It can be further modified to use selectively.
function handler(e) {
if(e.target.className=="class_name"){
e.stopPropagation();
e.preventDefault();
}
}
handler modified this way would disable clicks only on elements with class "class_name".
function handler(e) {
if(e.target.className!=="class_name") {
e.stopPropagation()
}
}
this would enable clicks only on elements with class "class_name".
Hope this helped :)
Dynamically disable all clicks on page
let freezeClic = false; // just modify that variable to disable all clics events
document.addEventListener("click", e => {
if (freezeClic) {
e.stopPropagation();
e.preventDefault();
}
}, true);
I often use it while loading or to avoid user to accidentally clic twice on an action button. Simple and performance friendly :)
Please check this working example
Alternative CSS way
Another one that I really like because of the visual feedback the user have:
/* style.css */
.loading {
cursor: wait; /* busy cursor feedback */
}
.loading * {
/* disable all mouse events on children elements */
pointer-events: none;
}
A simple example to dynamically add the .loading class:
const elm = document.getElementById('myElm')
elm.classList.add('loading')
myAsyncFunction().then(() => elm.classList.remove('loading'))
If you want absolutely nothing draggable/clickable, disabling typing in input fields etc, I'd consider showing a absolutely positioned transparent div over the entire page, so that every click will be on the div, which will do nothing. That will grant you swift and neat switching on and off of this click-disabler, without having to register heaps of listeners
The winning answer works well, but if you had pass the capture true boolean value, at the moment you want to remove the listener, you have to pass the exact same value. Otherwise, the listener removal will not work.
Example:
listener addition
document.addEventListener('click', DisableClickOnPage.handler, true);
listener removal
document.removeEventListener('click', DisableClickOnPage.handler, true);
Doc: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
window.addEventListener("click", (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
}, true)
If we added a listener to document instead of window anyone can add a listener to window and it works. Because of document child of window and its events trigger always after window events.
We use 3 method of Event object.
stopPropagation for prevent all capturing and bubbling
stopImmediatePropagation for prevent same listeners (e.g. another window click listeners)
preventDefault for prevent all user agent event (e.g anchor href or form submit)
If onclick = null has been executed how to revoke the onclick event to normal functioning.. or
Link text
<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>
This article would probably be useful:
http://www.computerhowtoguy.com/how-to-use-the-jquery-unbind-method-on-all-child-elements/
One part in particular is a recursive function that removes all click events. Remember that jQuery will remove click events IF the click event was created using jQuery. the function given in the article will remove both those created with jQuery and those that were not. The function given is this:
function RecursiveUnbind($jElement) {
// remove this element's and all of its children's click events
$jElement.unbind();
$jElement.removeAttr('onclick');
$jElement.children().each(function () {
RecursiveUnbind($(this));
});
}
You would call the function like this:
RecursiveUnbind($('#container'));
That function takes a jQuery object parameter, but you could easily change it up to pass a string as the name of the ID for the element, or however you think is best.
To prevent the default behavior of an event, use event.stopPropagation() and event.preventDefault() in your event handler. And don't forget, return false; is another method for indicating that you want to cancel the default action...
The Event property returnValue indicates whether the default action for this event has been prevented or not. It is set to true by default, allowing the default action to occur. Setting this property to false prevents the default action. (Source: MDN Web Docs: Event.returnValue.)
Typically, we return a value from any function when it has any meaningful or useful purpose -- return false to cancel an event is meaningful because it indicates a failed event, and it's useful because the event-handler uses it.
For greatest cross-browser compatibility, remember to return false;...
document.addEventListener("click",handler,true);
function handler(e){
e.stopPropagation();
e.preventDefault();
return false;
}