Related
Consider the following:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
How can I make it so that when the user clicks the span, it does not fire the div's click event?
Use event.stopPropagation().
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
For IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
There are two ways to get the event object from inside a function:
The first argument, in a W3C-compliant browser (Chrome, Firefox, Safari, IE9+)
The window.event object in Internet Explorer (<=8)
If you need to support legacy browsers that don't follow the W3C recommendations, generally inside a function you would use something like the following:
function(e) {
var event = e || window.event;
[...];
}
which would check first one, and then the other and store whichever was found inside the event variable. However in an inline event handler there isn't an e object to use. In that case you have to take advantage of the arguments collection which is always available and refers to the complete set of arguments passed to a function:
onclick="var event = arguments[0] || window.event; [...]"
However, generally speaking you should be avoiding inline event handlers if you need to to anything complicated like stopping propagation. Writing your event handlers separately and the attaching them to elements is a much better idea in the medium and long term, both for readability and maintainability.
Keep in mind that window.event is not supported in FireFox, and therefore it must be something along the lines of:
e.cancelBubble = true
Or, you can use the W3C standard for FireFox:
e.stopPropagation();
If you want to get fancy, you can do this:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
Use this function, it will test for the existence of the correct method.
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
I had the same issue - js error box in IE - this works fine in all browsers as far as I can see (event.cancelBubble=true does the job in IE)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
This worked for me
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
For ASP.NET web pages (not MVC), you can use Sys.UI.DomEvent object as wrapper of native event.
<div onclick="event.stopPropagation();" ...
or, pass event as a parameter to inner function:
<div onclick="someFunction(event);" ...
and in someFunction:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
I cannot comment because of Karma so I write this as whole answer: According to the answer of Gareth (var e = arguments[0] || window.event; [...]) I used this oneliner inline on the onclick for a fast hack:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
I know it's late but I wanted to let you know that this works in one line. The braces return an event which has the stopPropagation-function attached in both cases, so I tried to encapsulate them in braces like in an if and....it works. :)
According to this page, in IE you need:
event.cancelBubble = true
Use separate handler, say:
function myOnClickHandler(th){
//say let t=$(th)
}
and in html do this:
<...onclick="myOnClickHandler(this); event.stopPropagation();"...>
Or even :
function myOnClickHandler(e){
e.stopPropagation();
}
for:
<...onclick="myOnClickHandler(event)"...>
Why not just check which element was clicked? If you click on something, window.event.target is assigned to the element which was clicked, and the clicked element can also be passed as an argument.
If the target and element aren't equal, it was an event that propagated up.
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" />
This also works - In the link HTML use onclick with return like this :
Delete
And then the comfirmClick() function should be like:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>
Event.preventDefault()
is the current norm, and the one thing that worked for me. See: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
<button value=login onclick="login(event)">login</button>
//and in a script tag
function login(ev){
ev.preventDefault()
return false;
}
this worked in the latest Chrome, Opera, and IE. (the Mozilla page indicates Firefox would do it too, so I don't even test it!)
The best solution would be handle with the event through a javascript function, but in order to use a simple and quick solution using the html element directly, and once that the "event" and "window.event" are deprecated and not universally supported (https://developer.mozilla.org/en-US/docs/Web/API/Window/event), I suggest the following "hard code":
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>
Consider the following:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
How can I make it so that when the user clicks the span, it does not fire the div's click event?
Use event.stopPropagation().
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
For IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
There are two ways to get the event object from inside a function:
The first argument, in a W3C-compliant browser (Chrome, Firefox, Safari, IE9+)
The window.event object in Internet Explorer (<=8)
If you need to support legacy browsers that don't follow the W3C recommendations, generally inside a function you would use something like the following:
function(e) {
var event = e || window.event;
[...];
}
which would check first one, and then the other and store whichever was found inside the event variable. However in an inline event handler there isn't an e object to use. In that case you have to take advantage of the arguments collection which is always available and refers to the complete set of arguments passed to a function:
onclick="var event = arguments[0] || window.event; [...]"
However, generally speaking you should be avoiding inline event handlers if you need to to anything complicated like stopping propagation. Writing your event handlers separately and the attaching them to elements is a much better idea in the medium and long term, both for readability and maintainability.
Keep in mind that window.event is not supported in FireFox, and therefore it must be something along the lines of:
e.cancelBubble = true
Or, you can use the W3C standard for FireFox:
e.stopPropagation();
If you want to get fancy, you can do this:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
Use this function, it will test for the existence of the correct method.
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
I had the same issue - js error box in IE - this works fine in all browsers as far as I can see (event.cancelBubble=true does the job in IE)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
This worked for me
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
For ASP.NET web pages (not MVC), you can use Sys.UI.DomEvent object as wrapper of native event.
<div onclick="event.stopPropagation();" ...
or, pass event as a parameter to inner function:
<div onclick="someFunction(event);" ...
and in someFunction:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
I cannot comment because of Karma so I write this as whole answer: According to the answer of Gareth (var e = arguments[0] || window.event; [...]) I used this oneliner inline on the onclick for a fast hack:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
I know it's late but I wanted to let you know that this works in one line. The braces return an event which has the stopPropagation-function attached in both cases, so I tried to encapsulate them in braces like in an if and....it works. :)
According to this page, in IE you need:
event.cancelBubble = true
Use separate handler, say:
function myOnClickHandler(th){
//say let t=$(th)
}
and in html do this:
<...onclick="myOnClickHandler(this); event.stopPropagation();"...>
Or even :
function myOnClickHandler(e){
e.stopPropagation();
}
for:
<...onclick="myOnClickHandler(event)"...>
Why not just check which element was clicked? If you click on something, window.event.target is assigned to the element which was clicked, and the clicked element can also be passed as an argument.
If the target and element aren't equal, it was an event that propagated up.
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" />
This also works - In the link HTML use onclick with return like this :
Delete
And then the comfirmClick() function should be like:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>
Event.preventDefault()
is the current norm, and the one thing that worked for me. See: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
<button value=login onclick="login(event)">login</button>
//and in a script tag
function login(ev){
ev.preventDefault()
return false;
}
this worked in the latest Chrome, Opera, and IE. (the Mozilla page indicates Firefox would do it too, so I don't even test it!)
The best solution would be handle with the event through a javascript function, but in order to use a simple and quick solution using the html element directly, and once that the "event" and "window.event" are deprecated and not universally supported (https://developer.mozilla.org/en-US/docs/Web/API/Window/event), I suggest the following "hard code":
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>
I would like to find out, in JavaScript, which element currently has focus. I've been looking through the DOM and haven't found what I need, yet. Is there a way to do this, and how?
The reason I was looking for this:
I'm trying to make keys like the arrows and enter navigate through a table of input elements. Tab works now, but enter, and arrows do not by default it seems. I've got the key handling part set up but now I need to figure out how to move the focus over in the event handling functions.
Use document.activeElement, it is supported in all major browsers.
Previously, if you were trying to find out what form field has focus, you could not. To emulate detection within older browsers, add a "focus" event handler to all fields and record the last-focused field in a variable. Add a "blur" handler to clear the variable upon a blur event for the last-focused field.
If you need to remove the activeElement you can use blur; document.activeElement.blur(). It will change the activeElement to body.
Related links:
activeElement Browser Compatibility
jQuery alternative for document.activeElement
As said by JW, you can't find the current focused element, at least in a browser-independent way. But if your app is IE only (some are...), you can find it the following way:
document.activeElement
It looks like IE did not have everything wrong after all, this is part of HTML5 draft and seems to be supported by the latest version of Chrome, Safari and Firefox at least.
If you can use jQuery, it now supports :focus, just make sure you are using version 1.6+.
This statement will get you the currently focused element.
$(":focus")
From: How to select an element that has focus on it with jQuery
document.activeElement is now part of the HTML5 working draft specification, but it might not yet be supported in some non-major/mobile/older browsers. You can fall back to querySelector (if that is supported). It's also worth mentioning that document.activeElement will return document.body if no element is focused — even if the browser window doesn't have focus.
The following code will work around this issue and fall back to querySelector giving a little better support.
var focused = document.activeElement;
if (!focused || focused == document.body)
focused = null;
else if (document.querySelector)
focused = document.querySelector(":focus");
An addition thing to note is the performance difference between these two methods. Querying the document with selectors will always be much slower than accessing the activeElement property. See this jsperf.com test.
By itself, document.activeElement can still return an element if the document isn't focused (and thus nothing in the document is focused!)
You may want that behavior, or it may not matter (e.g. within a keydown event), but if you need to know something is actually focused, you can additionally check document.hasFocus().
The following will give you the focused element if there is one, or else null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
To check whether a specific element has focus, it's simpler:
var input_focused = document.activeElement === input && document.hasFocus();
To check whether anything is focused, it's more complex again:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Robustness Note: In the code where it the checks against document.body and document.documentElement, this is because some browsers return one of these or null when nothing is focused.
It doesn't account for if the <body> (or maybe <html>) had a tabIndex attribute and thus could actually be focused. If you're writing a library or something and want it to be robust, you should probably handle that somehow.
Here's a (heavy airquotes) "one-liner" version of getting the focused element, which is conceptually more complicated because you have to know about short-circuiting, and y'know, it obviously doesn't fit on one line, assuming you want it to be readable.
I'm not gonna recommend this one. But if you're a 1337 hax0r, idk... it's there.
You could also remove the || null part if you don't mind getting false in some cases. (You could still get null if document.activeElement is null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
For checking if a specific element is focused, alternatively you could use events, but this way requires setup (and potentially teardown), and importantly, assumes an initial state:
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
You could fix the initial state assumption by using the non-evented way, but then you might as well just use that instead.
document.activeElement may default to the <body> element if no focusable elements are in focus. Additionally, if an element is focused and the browser window is blurred, activeElement will continue to hold the focused element.
If either of these two behaviors are not desirable, consider a CSS-based approach: document.querySelector( ':focus' ).
I have found the following snippet to be useful when trying to determine which element currently has focus. Copy the following into the console of your browser, and every second it will print out the details of the current element that has focus.
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);
Feel free to modify the console.log to log out something different to help you pinpoint the exact element if printing out the whole element does not help you pinpoint the element.
I liked the approach used by Joel S, but I also love the simplicity of document.activeElement. I used jQuery and combined the two. Older browsers that don't support document.activeElement will use jQuery.data() to store the value of 'hasFocus'. Newer browsers will use document.activeElement. I assume that document.activeElement will have better performance.
(function($) {
var settings;
$.fn.focusTracker = function(options) {
settings = $.extend({}, $.focusTracker.defaults, options);
if (!document.activeElement) {
this.each(function() {
var $this = $(this).data('hasFocus', false);
$this.focus(function(event) {
$this.data('hasFocus', true);
});
$this.blur(function(event) {
$this.data('hasFocus', false);
});
});
}
return this;
};
$.fn.hasFocus = function() {
if (this.length === 0) { return false; }
if (document.activeElement) {
return this.get(0) === document.activeElement;
}
return this.data('hasFocus');
};
$.focusTracker = {
defaults: {
context: 'body'
},
focusedElement: function(context) {
var focused;
if (!context) { context = settings.context; }
if (document.activeElement) {
if ($(document.activeElement).closest(context).length > 0) {
focused = document.activeElement;
}
} else {
$(':visible:enabled', context).each(function() {
if ($(this).data('hasFocus')) {
focused = this;
return false;
}
});
}
return $(focused);
}
};
})(jQuery);
A little helper that I've used for these purposes in Mootools:
FocusTracker = {
startFocusTracking: function() {
this.store('hasFocus', false);
this.addEvent('focus', function() { this.store('hasFocus', true); });
this.addEvent('blur', function() { this.store('hasFocus', false); });
},
hasFocus: function() {
return this.retrieve('hasFocus');
}
}
Element.implement(FocusTracker);
This way you can check if element has focus with el.hasFocus() provided that startFocusTracking() has been called on the given element.
JQuery does support the :focus pseudo-class as of current. If you are looking for it in the JQuery documentation, check under "Selectors" where it points you to the W3C CSS docs. I've tested with Chrome, FF, and IE 7+. Note that for it to work in IE, <!DOCTYPE... must exist on the html page. Here is an example assuming you've assigned an id to the element that has focus:
$(":focus").each(function() {
alert($(this).attr("id") + " has focus!");
});
If you want to get a object that is instance of Element, you must use document.activeElement, but if you want to get a object that is instance of Text, you must to use document.getSelection().focusNode.
I hope helps.
If you're using jQuery, you can use this to find out if an element is active:
$("input#id").is(":active");
There are potential problems with using document.activeElement. Consider:
<div contentEditable="true">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
If the user focuses on an inner-div, then document.activeElement still references the outer div. You cannot use document.activeElement to determine which of the inner div's has focus.
The following function gets around this, and returns the focused node:
function active_node(){
return window.getSelection().anchorNode;
}
If you would rather get the focused element, use:
function active_element(){
var anchor = window.getSelection().anchorNode;
if(anchor.nodeType == 3){
return anchor.parentNode;
}else if(anchor.nodeType == 1){
return anchor;
}
}
Reading other answers, and trying myself, it seems document.activeElement will give you the element you need in most browsers.
If you have a browser that doesn't support document.activeElement if you have jQuery around, you should be able populate it on all focus events with something very simple like this (untested as I don't have a browser meeting those criteria to hand):
if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
$('*').live('focus', function () { // Attach to all focus events using .live()
document.activeElement = this; // Set activeElement to the element that has been focussed
});
}
With dojo, you can use dijit.getFocus()
Just putting this here to give the solution I eventually came up with.
I created a property called document.activeInputArea, and used jQuery's HotKeys addon to trap keyboard events for arrow keys, tab and enter, and I created an event handler for clicking into input elements.
Then I adjusted the activeInputArea every time focus changed, so I could use that property to find out where I was.
It's easy to screw this up though, because if you have a bug in the system and focus isn't where you think it is, then its very hard to restore the correct focus.
simple use document.activeElement to find the current active element
use document.activeElement.id
appending .id filters out returning the entire DOM and allows you to work only with identified elements
If you want to test the focused element on the dev tools, I suggest using.
$(":focus")
As document.activeElement will change to body when you click on anything in the dev tool.
To get the previous active element add this.
Example: you click on a button and need the previous active element. Since the button gets the focus once click on it.
document.addEventListener("focusout",ev => {
document.previousActiveElement = ev.target;
});
<script type ='javascript'>
function fun(userID) {
var btn = event.target; // error 'event' undefine in mozilla
alert(btn.id);
}
</script>
<asp:linkButton id ="target" style =" cursor:pointer" onclick ="fun('1')" >click here </asp:LinkButton>
I am new in JavaScript, I have written above code and this code is working fine in Google chrome but not working in Mozilla Firefox. can anyone suggest how to find control firing event?
Pass event to the function:
<asp:linkButton id ="target" style =" cursor:pointer" onclick ="fun(event, '1')" >click here </asp:LinkButton>
function fun(event, userID)
{
event= event|| window.event;
var btn = event.target;
alert(btn.id);
}
OR
Make sure your event is not undefined
function fun(userID)
{
var e = event || window.event;
var btn = e.target;
alert(btn.id);
}
event is undefined in firefox, because firefox doesn't have this property and instead you can provides an event to an event handler function as a parameter.
However your code is fine to work in Chrome and IE
Further I would also have script a type like <script type ='text/javascript'> and not just <script type ='javascript'>
To access the event in the click handler, attach it in jQuery rather than in the HTML.
HTML:
<a id ="target" style ="cursor:pointer" data-value="1">click here</a>
Javascript:
$(function() {
$("#target").on('click', function(event) {
event.preventDefault();
var btn = this;
var value = $(this).data('value');
alert(btn.id + ', ' + value);
});
});
Many (including myself) consider this the "proper" way to attach event handlers. There are several advantages, of which access to the event object is just one.
If you
pass the button using the keyword this then no need for event
...onclick="fun(this,1)"
function fun(but, userID) {
var butID=but.id
}
Use arguments[0].target instead of event.target. Most browsers support the event global variable, but firefox does not. arguments[0] contains all the same properties and functions, but is supported by all browsers.
As a side note: indices in the arguments array can be changed by your own code. In my current project arguments[0] contains all of my controller functions for some reason, while the global event methods and properties are contained in arguments[1]. Not entirely sure why this is, but you might need to do some debugging on the arguments array to see what values it contains and adjust accordingly. More often than not however, arguments[0] should work.
Consider the following:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
How can I make it so that when the user clicks the span, it does not fire the div's click event?
Use event.stopPropagation().
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
For IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
There are two ways to get the event object from inside a function:
The first argument, in a W3C-compliant browser (Chrome, Firefox, Safari, IE9+)
The window.event object in Internet Explorer (<=8)
If you need to support legacy browsers that don't follow the W3C recommendations, generally inside a function you would use something like the following:
function(e) {
var event = e || window.event;
[...];
}
which would check first one, and then the other and store whichever was found inside the event variable. However in an inline event handler there isn't an e object to use. In that case you have to take advantage of the arguments collection which is always available and refers to the complete set of arguments passed to a function:
onclick="var event = arguments[0] || window.event; [...]"
However, generally speaking you should be avoiding inline event handlers if you need to to anything complicated like stopping propagation. Writing your event handlers separately and the attaching them to elements is a much better idea in the medium and long term, both for readability and maintainability.
Keep in mind that window.event is not supported in FireFox, and therefore it must be something along the lines of:
e.cancelBubble = true
Or, you can use the W3C standard for FireFox:
e.stopPropagation();
If you want to get fancy, you can do this:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
Use this function, it will test for the existence of the correct method.
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
I had the same issue - js error box in IE - this works fine in all browsers as far as I can see (event.cancelBubble=true does the job in IE)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
This worked for me
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
For ASP.NET web pages (not MVC), you can use Sys.UI.DomEvent object as wrapper of native event.
<div onclick="event.stopPropagation();" ...
or, pass event as a parameter to inner function:
<div onclick="someFunction(event);" ...
and in someFunction:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
I cannot comment because of Karma so I write this as whole answer: According to the answer of Gareth (var e = arguments[0] || window.event; [...]) I used this oneliner inline on the onclick for a fast hack:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
I know it's late but I wanted to let you know that this works in one line. The braces return an event which has the stopPropagation-function attached in both cases, so I tried to encapsulate them in braces like in an if and....it works. :)
According to this page, in IE you need:
event.cancelBubble = true
Use separate handler, say:
function myOnClickHandler(th){
//say let t=$(th)
}
and in html do this:
<...onclick="myOnClickHandler(this); event.stopPropagation();"...>
Or even :
function myOnClickHandler(e){
e.stopPropagation();
}
for:
<...onclick="myOnClickHandler(event)"...>
Why not just check which element was clicked? If you click on something, window.event.target is assigned to the element which was clicked, and the clicked element can also be passed as an argument.
If the target and element aren't equal, it was an event that propagated up.
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" />
This also works - In the link HTML use onclick with return like this :
Delete
And then the comfirmClick() function should be like:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header'); event.stopPropagation()">
something inside the header
</span>
</div>
Event.preventDefault()
is the current norm, and the one thing that worked for me. See: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
<button value=login onclick="login(event)">login</button>
//and in a script tag
function login(ev){
ev.preventDefault()
return false;
}
this worked in the latest Chrome, Opera, and IE. (the Mozilla page indicates Firefox would do it too, so I don't even test it!)
The best solution would be handle with the event through a javascript function, but in order to use a simple and quick solution using the html element directly, and once that the "event" and "window.event" are deprecated and not universally supported (https://developer.mozilla.org/en-US/docs/Web/API/Window/event), I suggest the following "hard code":
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>