I have a link on my page which I want to behave as follows on the iPad.
On first click only, prevent default action (i.e. should not follow the href action) and on subsequent clicks, follow/allow default action (i.e. should follow the href action).
The code I have written is:
if (navigator.userAgent.match(/iPad/i) != null)
{
var clickCount = 0;
$("a").click(function(event) {
if (clickCount == 0)
{
event.preventDefault();
}
else{
return true;
}
});
clickCount++;
}
Now for some reason, even on first click, it follows the link. How can I fix this?
Try to move clickCount++; into the callback function from the click-event.
$("a").click(function(event) {
if (clickCount == 0){
event.preventDefault();
}
else{
return true;
}
clickCount++;
});
Currently, clickCount++; is called when the document is loaded and is already set to 1 when the event gets fired for the first time.
Related
I have function that will do a simple validation, if every input text is empyt an alert will pop up, and the program will stop. Function will fire up after a click of a button. I'm allready passing the event, but somehow the event.PreventDefault() not working, so still accessing the server side code.
Below is the function to do simple validation.
var checkRequired = function(event)
$('.box-load .requir').each(function(index,item) {
var index = $(item).data('index');
if(index === 'text') {
if ($(item).val() == "") {
$(this).focus();
alert('Please input the required parameter');
event.preventDefault();
}
}
});
}
For the trigger the function I use this code:
$(document).on('click','.box-load .btn-save', function(event) {
event.preventDefault();
checkRequired(event);
Bellow the checkRequired(), I'm gonna do an ajax request. What i want is, if one of the input text is empty, the event is stop. But with that code, is not working. Any suggestion?
Thanks in advance.
if you call event.preventDefault(), default action of the event will not be triggered.
$(document).on('click','.box-load .btn-save', function(event)
{
checkRequired(event);
event.preventDefault();
event.preventDefault() should be outside the for loop.
var checkRequired = function(event)
{
$('.box-load .requir').each(function(index,item) {
var index = $(item).data('index');
if(index === 'text') {
if ($(item).val() == "") {
$(this).focus();
alert('Please input the required parameter');
}
}
});
event.preventDefault();
}
event.preventDefault() will just stop the default action, not stop your function call. If you don't specifically return from your function, it will go on and launch the ajax.
I have this problem, I want to conditionally stop the anchor from jump.
condition jump
I tried to add some codes in my coditionFun function to conditionally stop it from jumping.
function conditionFun() {
var flag=false;
if(flag){
console.log('you allowed anchor jump'); return true;
} else {
console.log('you stopped the anchor jump');return false;
}
}
I was hoping to get "you stopped the anchor jump" and DO NOT jump to "http://www.google.com.hk", but it logged "you stopped the anchor jump" and immediately jump to "http://www.google.com.hk", anyone help me with this? thank you!
Using jQuery would be your best bet. Then you can run your logic whenever the click event happens on the anchor:
<a id="anchor" href="url">Your link<a/>
$('#anchor').click(function(e){
var flag=false;
if(flag){
console.log('you allowed anchor jump');
} else {
//stops the default anchor action from running
e.preventDefault();
console.log('you stopped the anchor jump');
}
})
you can define your own cancel default function.
<a id="alink" href="www.google.com">Google</a>
function cancelDefaultAction(e) {
var evt = e ? e:window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
return false;
}
function conditionFun(e) {
var flag=false;
if(flag){
console.log('you allowed anchor jump');
return cancelDefaultAction(e);
} else {
console.log('you stopped the anchor jump');
return cancelDefaultAction(e);
}
}
document.getElementById("alink").addEventListener("click", conditionFun);
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
$(document).click(function(evt) {
var target = evt.currentTarget;
var inside = $(".menuWraper");
if (target != inside) {
alert("bleep");
}
});
I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(".menuWraper"). However, this doesn't work, currentTarget is HTML object(?) and $(".menuWraper") is Object object? I am very confused.
Just have your menuWraper element call event.stopPropagation() so that its click event doesn't bubble up to the document.
Try it out: http://jsfiddle.net/Py7Mu/
$(document).click(function() {
alert('clicked outside');
});
$(".menuWraper").click(function(event) {
alert('clicked inside');
event.stopPropagation();
});
http://api.jquery.com/event.stopPropagation/
Alternatively, you could return false; instead of using event.stopPropagation();
if you have child elements like dropdown menus
$('html').click(function(e) {
//if clicked element is not your element and parents aren't your div
if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
//do stuff
}
});
The most common application here is closing on clicking the document but not when it came from within that element, for this you want to stop the bubbling, like this:
$(".menuWrapper").click(function(e) {
e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
$(".menuWrapper").hide(); //click came from somewhere else
});
All were doing here is preventing the click from bubbling up (via event.stopPrpagation()) when it came from within a .menuWrapper element. If this didn't happen, the click came from somewhere else, and will by default make it's way up to document, if it gets there, we hide those .menuWrapper elements.
try these..
$(document).click(function(evt) {
var target = evt.target.className;
var inside = $(".menuWraper");
//alert($(target).html());
if ($.trim(target) != '') {
if ($("." + target) != inside) {
alert("bleep");
}
}
});
$(document).click((e) => {
if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
} else {
this.onClose();
}
});
I know that the question has been answered, but I hope my solution helps other people.
stopPropagation caused problems in my case, because I needed the click event for something else. Moreover, not every element should cause the div to be closed when clicked.
My solution:
$(document).click(function(e) {
if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
$(e.target).closest("#div-exception").attr("id") != "div-exception") {
alert("Clicked outside!");
}
});
http://jsfiddle.net/NLDu3/
I do not think document fires the click event. Try using the body element to capture the click event. Might need to check on that...
This code will open the menu in question, and will setup a click listener event. When triggered it will loop through the target id's parents until it finds the menu id. If it doesn't, it will hide the menu because the user has clicked outside the menu. I've tested it and it works.
function tog_alerts(){
if($('#Element').css('display') == 'none'){
$('#Element').show();
setTimeout(function () {
document.body.addEventListener('click', Close_Alerts, false);
}, 500);
}
}
function Close_Alerts(e){
var current = e.target;
var check = 0;
while (current.parentNode){
current = current.parentNode
if(current.id == 'Element'){
check = 1;
}
}
if(check == 0){
document.body.removeEventListener('click', Close_Alerts, false);
$('#Element').hide();
}
}
function handler(event) {
var target = $(event.target);
if (!target.is("div.menuWraper")) {
alert("outside");
}
}
$("#myPage").click(handler);
try this one
$(document).click(function(event) {
if(event.target.id === 'xxx' )
return false;
else {
// do some this here
}
});
var visibleNotification = false;
function open_notification() {
if (visibleNotification == false) {
$('.notification-panel').css('visibility', 'visible');
visibleNotification = true;
} else {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
$(document).click(function (evt) {
var target = evt.target.className;
if(target!="fa fa-bell-o bell-notification")
{
var inside = $(".fa fa-bell-o bell-notification");
if ($.trim(target) != '') {
if ($("." + target) != inside) {
if (visibleNotification == true) {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
}
}
});
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.