Most likely this question has been asked many times before, but as far as I could see, the same responses are given and they do not work for me.
The problem is the following: I have a button control that is rendered as a table and inside this table I have a smaller button. The requirement is that clicking the outer button should show one message and clicking on the small inner button should show another message.
I have the code inside this fiddle: http://jsfiddle.net/DZFEZ/3/
$('#mine').click(function (evt) {
alert("big button click");
});
$('#mine-fav').click(function (evt) {
alert("small button click");
var event = evt || window.event; // cross-browser event
if (event) {
event.returnValue = false;
event.cancelBubble = true;
event.stopPropagation();
event.preventDefault();
}
});
This code works ok on Chrome (and I suspect Opera/Safari. did not check as I cannot install those browsers), but on IE9+ and Fireforx it does not. The event is just triggered on the big outer button, no matter if I click on the small one.
Anybody has any clue why?
Thanks,
Marius.
To resolve your problem just replace outer button to div.
Because i think that the button in atomic at those browser and there are some difference in browsers implementation.
You should use elements as expected.
Working demo
Related
I have a quite complex product in WooCommerce with a complicated variation selector.
To simplify things you can just click on a photo of a variation you like (anywhere on the page) and have it selected for you.
So I just added an eventlistener on the photos that triggers a click on the correct variation checkbox, as soon as you click the image:
Photo_Variation1.addEventListener('click', () => {
Variation1.click()
})
This works fine, but then the browser automatically jumps to the original variation selector – because it gets focused after/during the click-event. This is rather confusing UX-wise.
So I tried for hours to find a solution. But so far my only lousy success was making it work in Safari, by adding this to the eventListener:
Variation1.blur()
I found out it doesn't work in other browsers, because there the focus event happens directly after the mousedown-event. (In Safari it's after the click.)
However, when I tried to solely trigger the mousedown function (with a "preventDefault") nothing gets selected, at all.
Do you have an idea how I can trigger a click and prevent focusing the clicked element or any another workaround that stops the browser from jumping around?
PS:
I am using JavaScript for just 8 hours, so have mercy, please. :D
You can programmatically set a checkbox as checked by doing the following:
Photo_Variation1.addEventListener('click', () => {
var myCheckBox = document.getElementById("myCheckBoxId");
if(myCheckBox.checked) {
myCheckBox.checked = false;
} else {
myCheckBox.checked = true;
}
})
Here is more info to help you as well.
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
I tried the solution based of lots of examples and the event works only if something else is clicked first eg. a link has been first right clicked on the same page. Then if I click the browser close button it prompts a warning before closing as expected.
Otherwise if I first go to the page or refresh it and click close button it doesn't work and page closes. The code inside onbeforeunload function hits each time but in the last case clearly has no effect.
$("button, a").bind("click", function () {
window.onbeforeunload = null;
});
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?'; // the code hits each time - normally it does have no effect but if right-clicked a link on the page first it does work?
};
It looks as a very strange behaviour. Anyone has idea why this works only when another event has happened on the page first?
Tried in Firefox & Chrome.
It's a feature. According to MDN:
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all.
What is the use case where you need the onbeforeunload popup to be shown even with no user interaction? Usually these are for preventing data loss on unsubmitted forms, for instance. If the user wants to leave the page and there isn't any reason to show the popup, you shouldn't attempt to do so.
Here is the code snippet in question:
eventClick: function(calEvent) {
if(user != calEvent.modified_by && calEvent.modified_by != 0){
$('.antoconfirm').css("display", "inline-block");
}
$('#fc_edit').click();
$('#title2').val(calEvent.title);
//-----------Submit button click-------------------
$(".antosubmit2").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
calEvent.title = $("#title2").val();
calEvent.confirm = 0;
calEvent.backgroundColor = '#ddbd39';
dbTitle = calEvent.title;
//ajax goes here, works fine
calendar.fullCalendar('updateEvent', calEvent);
$(".antosubmit2").off("click");
$('.antoclose2').click();
});
//---------------------------------------------------
//-----------Close button click-------------------
$(".antoclose2").on("click", function() {
console.log(calEvent.title);
$(".antoclose2").off("click");
});
//---------------------------------------------------
return false;
},
$('#fc_edit').click(); calls the modal in which the editing is done. There are two buttons with the classes "antosubmit2" and "antoclose2". You click on an event, the modal comes up, you change the title, click submit, the modal goes away and voila, the title is changed(from "new1" to "new3" in this example):Test events, title change
When ONLY the submit button is used, everything works fine, you can change one event after the other without incident. On the other hand, when you use the close button on one event and try to change the title on another, the first event will be changed:Test events, title change after close
Now at the "ajax goes here, works fine" part is an ajax POST, that sends the correct data despite what the calendar shows and after a page reload everything is edited the way it should be.
Is this a bug with fullcalendar's event rendering or does my code fail somewhere?
I think you need to run .off against all your button click handlers whenever any of your buttons is used. At the moment you only remove the handler for the button that was actually clicked. If you don't remove them, those handlers will remain and get used again if the other button is clicked in future. This is exactly the scenario you have run into.
In the case you described, I suspect because when you closed the first event, you didn't remove the "click" handler related to the "submit" button that went with that event. Then, when you changed the title of the second event, it ran the "click" handler for both events, because you never removed the first handler. Hence why the title for the first event gets changed when it shouldn't.
As an exercise, I'm trying to add an event listener to an ebay.com element.
Expected result: show an alert and stop the web page from going to the next URL.
What happens: the alert is shown but the next URL is shown anyway.
I found something interesting on the product pages where I'm testing out preventDefault, stopPropagtion and stopImmediatePropagation.
No matter which combinations I use, nothing seem to work.
The basic code is:
$('#binBtn_btn').click(function(evt){
alert('hi');
evt.stopPropagation(); //or any other option.
});
The thing is that I get the alert, but it still goes to the next page, as if I never stopped the propagation.
I read a lot of articles about event handling, but I couldn't find the answer.
Your help is much appreciated.
My best guess it that the Button has its own click handler, and it's firing before yours.
$('#binBtn_btn').data("events") shows us that there is indeed a click event. Remove that using off.
$('#binBtn_btn').off('click');
Clicking the button now will still cause the form the submit, as all we're doing is browsing to a page. The button is actually just an a tag.
$('#binBtn_btn').click(function(e){
alert('Gotcha!');
e.preventDefault();
});
Let's see what happens if we remove their handler, add ours, and then re-add their one...
var existing = $('#binBtn_btn').data('events').click[0];
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; });
$('#binBtn_btn').data('events').click.push(existing);
Same, but just looking at the function for the click handler (rather than tweaking the events.click array directly...)
var existing = $('#binBtn_btn').data('events').click[0].handler;
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); });
$('#binBtn_btn').click(existing);
As expected, what is now the second handler -- their handler -- doesn't first. (I've added a return false; rather than e.preventDefault();, just to demonstrate different ways of doing things!)
You can check out what they're doing by placing a breakpoint and viewing the existing var above. You'll see that at the end of their function, they do indeed call e.preventDefault();.
Hope this helps.
try using evt.preventDefault() like this:
$('#binBtn_btn').click(function(evt){
evt.preventDefault();
alert('hi');
});
Then it will not go to the next page.
In chrome and firefox (and maybe others), if you've got an input focused, pressing "space" and "enter" clicks them for you. I'm making an HTML 5 game and I want to rewrite how space and enter reacts on focus and the default behavior is getting in my way. Is there a way to turn this default behavior off in most browsers?
Here's a jsfiddle demonstrating the problem.
<button>Button<button>
$("button").on("click", function(event) { alert("Clicked"); });
If you click on the button, it displays the alert which is good. But if you press "space" or "enter" after you click it, it also alerts. I want to prevent this behavior so that I can write my own without them interfering.
You can fix this by using event.detail. That will return the amount of times the button has been clicked. If you press enter, this returns 0, since you clicked it 0 times, and if you click it via your mouse, it returns the amount of times you clicked the button.
To access event.detail, you need to access the original event object. This can be done via event.originalEvent in the jQuery event object. So, if you just put an if statement in your script:
if (event.originalEvent.detail != 0) {
//your click event code
}
then it'll only run if you actually click the button via your mouse.
This will be much more accurate than checking if the button has :focus, since the button automatically gets focused when you click it, so doing that would disable the button after a single click.
Check if a button is active:
$("button").on("click", function(event) { alert("Clicked"); });
$(document).on('keydown', function(e){
if($(document.activeElement).is('button') &&
(e.keyCode === 13 || e.keyCode === 32))
e.preventDefault();
});
You could also use jQuery's :focus selector, which should return the same element, $(':focus').is('button').
http://jsfiddle.net/zmH5V/4/
other option, is to blur the object right after clicking it:
<button id="mybutton" onclick="myFunction();this.blur();">button</button>
I find that solution easier to use, because it requires less code-lines, and gets the same results:
while the button is blured, it has no contact with the keyboards events, and that solves the problem.