Stop button clicks? - javascript

I have two methods
$('.btn-delete').click(function(){
//do A
//return false?
});
$('.btn-delete').click(function(){
//do B
});
How can I stop 'B' from happening when A returns false?

var whatDoesAReturn = false;
$('.btn-delete').click(function(){
if (something) {
whatDoesAReturn = true;
return true;
} else {
whatDoesAReturn = false;
return false;
}
});
$('.btn-delete').click(function(){
if (!whatDoesAReturn) {
// Do whatever
}
});

Use the jquery event's stopImmediatePropagation. That's exactly what it's for:
$('.btn-delete').click(function(e){
//do A
if (a is returning false)
e.stopImmediatePropagation();
});
$('.btn-delete').click(function(){
//do B
});

Why not to put altogether?
$('.btn-delete').click(function(){
//do A
// if true do B
});

You better make a single function and put condition to handle if that is not the solution you can set a flag in first event.
Using single event handler
$('.btn-delete').click(function(){
//do A
if(condition != false)
execute code of second event.
//return false?
});
Using flag
flag = true;
$('.btn-delete').click(function(){
//do A
if (something) {
flag = true;
else
flag = false;
return flag;
});
$('.btn-delete').click(function(){
if(!flag) return;
//do B
});

(Just in case anyone wants a non-jQuery solution).
This can't be done directly in plain JavaScript, because you can't be sure in which order the event listeners will be triggered.
According to the spec,
Although all EventListeners on the EventTarget are guaranteed to be
triggered by any event which is received by that EventTarget, no
specification is made as to the order in which they will receive the
event with regards to the other EventListeners on the EventTarget.
Then, one possibility is joining all handlers inside only one function.
But if that's not possible, you could use event delegation to a wrapper, and stop propagation if necessary:
<div class="btn-wrapper"><button class="btn-delete">Delete</button></div>
­
var btn = document.querySelector('.btn-delete');
btn.addEventListener('click', function(e){
// do A
if(cond) e.stopPropagation();
}, false);
btn.parentNode.addEventListener('click', function(e){
//do B
}, false);

Related

JQuery trigger element itself in a bind

Can someone explain me why this snippet can't work ?
I can't use specific features like window.location, submit(), (instead of trigger()), because this function is bound to elements that are very differents.
$('a, button').bind('click', function(oEvent, oData) {
var oButton = $(this);
var bSkip = (oData && oData.skip);
if(true === bSkip) {
return true;
} else {
oEvent.preventDefault();
//oEvent.stopPropagation();
if(confirm('This is a confirm box')) {
$(oButton).trigger('click', { skip: true });
}
}
});
Thanks in advance ! ;)
In your case even though the click event gets fired the default behavior of the links may not be triggered because of the constraints imposed by the browser
If I understand what you are trying to do correctly(if the action s not confirmed then cancel the default behavior), then you can achieve it by the below... there is no need to fire the event again
$('a, button').bind('click', function (oEvent, oData) {
if (confirm('This is a confirm box')) {
return true;
} else {
oEvent.preventDefault();
}
});
Demo: Fiddle

Cancel touchend if touchmove fires

I'm building something mainly for use on tablets, where the user can tap an item on the screen and a class is applied to it. This is what I have so far:
The problems:
I want to use touch events to remove the class and add the class on touch end (to make it faster).
I don't want it to do anything if the user swipes (touchmoves).
I've tried a number of things, none of which have worked. The simplest I've tried (unsuccessfully) is this:
var dragging = false;
$(".items").on("touchmove", function(){
dragging = true;
});
$('.items').on("click touchend", function(event){
if (dragging = true){
}
else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});
I would argue this is a more safe way of doing it
Setting variable to false
var dragging = false;
Setting var to true ontouchmove (allows you to reuse this code everywhere in your app)
$("body").on("touchmove", function(){
dragging = true;
});
Your button
$("#button").on("touchend", function(){
if (dragging)
return;
// your button action code
});
Resetting variable (important)
$("body").on("touchstart", function(){
dragging = false;
});
You want to use either of the following:
if(dragging == true)
Or, simply:
if(dragging)
You should only use a single = sign when you are setting a value, whereas two == signs should be used when checking a value. Therefore, your code should look like:
$('.items').on("click touchend", function(event){
if(!dragging)
{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});
Notice how you do not need to check if dragging == true because you are not running any code in this case. Instead you can simply check if dragging == false or, !dragging
You can just check if event is cancelable. It's false after touchmove
$('.items').on("click touchend", function(event){
if (event.cancelable){
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});
where you have dragging check put
if (dragging == true){
dragging = false;
}
else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
it will reset it on release
also watch out for double calls on events as they sometimes trigger twice on some platforms best to check platform with first the following will help with checks
var clickEventType=((document.ontouchstart!==null)?'click':'touchend');
or
var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
clickEventType = 'click';
}

Preserving current click event jquery

I need to temporarily change the click event for an element as follows:
var originalEvent = '';
$("#helpMode").click(function (e) {
originalEvent = $("#element").getCurrentClickEventHandler();
$("#element").click(function (e) {
//Do something else
});
});
//Later in the code
$("#helpModeOff").click(function (e) {
$("#element").click(originalEvent);
});
How would I store the current function that is an event handler in a global variable for later reuse?
EDIT: Here's what im trying to do:
var evnt = '';
$("#helpTool").click(function (e) {
if(!this.isOn){
evnt = $("#Browse").data('events').click;
$("#ele").unbind('click');
$("#ele").click(function (e) {
alert('dd');
});
this.isOn=true;
}else{
this.isOn = false;
alert('off');
$("#ele").unblind('click');
$("#ele").click(evnt);
}
});
Here you go, figured it out:
Now with e.srcElement.id you can get either HelpMode or HelpModeOff and then can turn on/off your help stuff!
http://jsfiddle.net/zcDQ9/1/
var originalEvent = '';
$('#element').on('yourCustomEvent', function (e) {
// do stuff
alert(originalEvent);
$(this).toggleClass('toggleThing');
//test for helpMode or helpModeOff here now...
});
$("#helpMode").on('click', function (e) {
originalEvent = e.srcElement.id;
$("#element").trigger('yourCustomEvent');
});
//Later in the code
$("#helpModeOff").on('click', function (e) {
originalEvent = e.srcElement.id;
$("#element").trigger('yourCustomEvent');
});​
Okay. In jQuery 1.7 I guess it's a little different.
//get the handler from data('events')
$.each($("#element").data("events"), function(i, event) {
if (i === "click") {
$.each(event, function(j, h) {
alert(h.handler);
});
}
});
http://jsfiddle.net/yQwZU/
This is the reference.
Not sure if the following works with 1.7.
originalEvent = $('#element').data('events').click;
jQuery stored all the handlers in data. See here to learn more about data('events').
Personally, I think I would avoid manually binding and unbinding handlers.
Another way to approach this is to bind click events to classes, then all you need to do is add and remove classes from the appropriate elements when switching to/from help mode.
Here's a jsfiddle illustrating what I mean.
Switching to and from help mode then just involves adding removing classes:
$('#btnhelpmode').click(function(){
if(!helpMode){
helpMode = true;
$('.normalmode').addClass('helpmode').removeClass('normalmode');
$(this).val('Switch to normal mode...');
}else{
helpMode = false;
$('.helpmode').addClass('normalmode').removeClass('helpmode');
$(this).val('Switch to help mode...');
}
});
and you just create the handlers required, binding them to the appropriate classes:
$('#pagecontent').on('click', '#element1.normalmode', function(){
alert('element1 normal mode');
});
$('#pagecontent').on('click', '#element1.helpmode', function(){
alert('element1 help mode');
});
$('#pagecontent').on('click', '#element2.normalmode', function(){
alert('element2 normal mode');
});
$('#pagecontent').on('click', '#element2.helpmode', function(){
alert('element2 help mode');
});

Respect regular onsubmit handlers from jQuery.submit

I want a jQuery form submit handler to respect any previous submit handlers, including ones added with onsubmit.
I'm trying to detect the previous handler's return value but can't seem to do it:
<form><input type="submit" /></form>
<script type="text/javascript">
$('form')[0].onsubmit = function() { return false; }; // called first
$('form').submit(function(e) {
console.log(e.result); // undefined
console.log(e.isDefaultPrevented()); // false
console.log(e.isPropagationStopped()); // false
console.log(e.isImmediatePropagationStopped()); // false
});
</script>
Is there a way to do this?
I found one non-jQuery way to do this:
var form = $('form')[0];
var old_onsubmit = form.onsubmit;
form.onsubmit = function() {
if ($.isFunction(old_onsubmit)) {
if (old_onsubmit() === false) {
console.log("false");
return false;
}
}
console.log("true");
return true;
}
But I'd much prefer detecting this from the jQuery-bound submit handler

Stop further event handlers on an element

I'm writing a little jQuery extension that prevents a user from double clicking on a link.
$.fn.preventDoubleClick = function() {
return this.click(function() {
var $t = $(this)
, retVal = $t.data('active') // check the internal flag
;
if (retVal || retVal === undefined) { // if ON...
$t.data('active', false); // set the internal flag to OFF
setTimeout(function() {
$t.data('active', true);
}, 1000); // after 1 second, set the internal flag to ON
console.log("allowed");
return true;
} else { // if OFF...
console.log("blocked");
return false;
}
});
};
the problem is that if there are other click event handlers on the elements, they still fire:
$('#myLink').click(function() {
console.log("Clicked");
});
$('#myLink').preventDoubleClick();
And now when you double click the link, I get this in my log:
allowed
clicked
blocked
clicked
So basically, I need the click function inside preventDoubleClick to stop all the other event handlers from firing. How can I do this?
Thanks to Adam's link, I was able to see the function I needed: stopImmediatePropagation().
I believe you're looking for event.stopPropagation
EDIT: turns out this was not the correct option for Nick's purposes. Please see his answer.

Categories

Resources