The question is: should the disabled element produce an event that will be triggered on its parent(s)?
<div id="test">
<button disabled="disabled">Click me</button>
</div>
<script type="text/javascript">
document.getElementById("test").onclick = function() {
alert("Clicked!");
};
</script>
All browsers except IE prevent the event from being fired, but IE doesn't. Is this behavior documented or standardized? Which of browsers process the code above correctly?
As per http://www.quirksmode.org/js/events_advanced.html I highly recommend to use event delegation instead of .onclick() binding. Example:
var element = document.getElementById('test'),
doSomething = function () {
alert("Clicked!");
};
if (element.addEventListener) {
element.addEventListener('click', doSomething, false);
} else if (element.attachEvent) {
elem.attachEvent('onclick', doSomething);
}
:)
Related
I have a button inside a division.Both have separate onclick listeners.But since button is a part of the division,the event attached to button is also triggered when clicked.Is there a way to remove it?
i tried :not / .not.it dint work.
<div id="divson">
<button id="btn"></button>
</div>
$('#divson').not('#btn').click(function sayHello() {
alert('Helo!');
});
$('#btn').click(function sayJello() {
alert('Jelo!');
});
http://jsfiddle.net/gw3LqrcL/
Just return false; in your handler to stop the event propagation: http://jsfiddle.net/gw3LqrcL/1/
Use stopPropagation on the event passed in to the handler on #btn to stop the event bubbling to the parent element:
$('#divson').click(function () {
alert('Helo!');
});
$('#btn').click(function (e) {
e.stopPropagation();
alert('Jelo!');
});
Updated fiddle
I have a bit of a head scratcher when it comes to using stopPropagation in javascript. According to many different sources stopPropagation should stop bubbling of the event to parent elements, however, when I use it it seems to stop the event from being called after the first click. I have worked up a very simple bit of code to reproduce the behaviour below:
HTML:
<div id="root">
<div id="top">
<h1>Click Me!</h1>
</div>
</div>
js/jQuery:
var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);
$("#root").on('boop', function (e) {
alert("root boop!");
});
$("#top").on('boop', function (e) {
// After this is called, this event handler will never fire again.
e.stopPropagation();
alert("top boop!");
});
$("h1").click(function (e) {
$("#top").get(0).dispatchEvent(myEvent);
// I know that $("#top").trigger will prevent the problem, what is wrong with the form above?
});
There is a Fiddle as well.
You dispatch myEvent on which you eventually call .stopPropagation(). Every click thereafter use the same instance of myEvent on which the propagation has been stopped.
You'll need to make a copy of the event before dispatching it if you want to be able to click multiple times.
...or you could rewrite your JavaScript like this:
$("#root").on('boop', function (e) {
alert("root boop!");
});
$("#top").on('boop', function (e) {
e.stopPropagation();
alert("top boop!");
});
$("h1").click(function (e) {
var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);
$("#top").get(0).dispatchEvent(myEvent);
});
Working JS Fiddle
I'm making a web app and I want to click on an element and handle the click in one long click event handler. I'm testing in Safari. The following works fine in Safari on my Mac but not in iOS:
<html>
<head>
<script>
window.addEventListener("click",function (event) {
alert('hi');
});
</script>
</head>
<body>
<div style="width: 100%; height: 100%; background: black;">
</div>
</body>
</html>
Why does this work in the OSX version of Safari but not in iOS?
This code should work cross-browser:
function Subscribe(event, element, func) {
if (element.addEventListener) {
element.addEventListener(event, func, false);
} else if (element.attachEvent) {
element.attachEvent("on" + event, func);
} else {
element['on' + event] = func;
}
}
function func () {
alert('hi');
}
Subscribe('click', window, func);
Try changing the event listener "click" to "click touchstart"
I found a very simple solution. I put another div about the div element in my sample code (see my question above). The opening div tag is
<div onClick="">
All divs inside this div tag will now trigger the click event. This also works with touchstart.
In my case I just needed to replace window to document:
Doesn't work on iOS:
window.addEventListener('click', () => {})
iOS compatible:
document.addEventListener('click', () => {})`
I have a button that I'm trying to hide once clicked. Also I just don't want to hide it I want it to style='display:none' once clicked.
<button onclick="this.style.display='none';">a button</button>
see example: http://jsfiddle.net/uWfYk/
Update 2020:
With addEventListener() and querySelector() being supported in all major browsers, it can just be
document
.querySelector('#the-important-button')
.addEventListener('click', ev => ev.target.style.display = 'none');
<button id="the-important-button">Click</button>
Answer in 2012:
To make it unobtrusive and work on earlier IE and other modern browsers:
the HTML:
<button id="the-important-button">Submit</button>
JavaScript:
var theButton = document.getElementById('the-important-button');
function hideTheButton() {
this.style.display = 'none';
}
function addEvent(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else if (target.attachEvent) {
target.attachEvent('on' + type, function() {
return handler.call(target, window.event);
});
} else {
target['on' + type] = handler;
}
}
addEvent(theButton, 'click', hideTheButton);
Note that addEvent is a generic function that works well on earlier IE and other modern browsers. You can add other events similar to the last line of code above.
Sample on http://jsfiddle.net/W37Fb/5/
Attach a onclick event to hide and apply style display:none using JS style, see below,
<input type="button" name="btn" value="Hide me" onclick="this.style.display='none'" />
http://jsfiddle.net/uWfYk/2/
Using jquery as follows
$("#btn").click(function(){
//do need full
$(this).fadeOut();
})
Using pure JS
http://jsfiddle.net/PeM2b/
I'm curious whats the best way to call a JS function with a href link in HTML. I don't use a library and i see alot of mention about jquery using event handlers ...
But if im not using a library can it still be done or will i have to use an on click type call ?
You can use event handlers with plain javascript. No framework is required. Here's a cross browser function I use:
// add event cross browser
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
And, an example of using it would be like this:
HTML:
<a id="myLink" href="#">Click ME</a>
Javascript:
var link = document.getElementById("myLink").
addEvent(link, "click", function(e) {
// process the click on the link here
});
If you don't want the default click of a link to happen, then you need to prevent the default behavior from the event handler like this:
var link = document.getElementById("myLink").
addEvent(link, "click", function(e) {
// process the click on the link here
// prevent default action of the click
if (e.preventDefault) {
e.preventDefault(); // normal browsers
} else {
e.returnValue = false; // older versions of IE (yuck)
}
});
try this
function test() { alert (''); }
<a href="#" onclick="test();" />
Basically there are two ways:
...
and
...
(in this case someFunction must return false)
I prefer the latter.