I'm currently using jQuery to make a div clickable and in this div I also have anchors. The problem I'm running into is that when I click on an anchor both click events are firing (for the div and the anchor). How do I prevent the div's onclick event from firing when an anchor is clicked?
Here's the broken code:
JavaScript
var url = $("#clickable a").attr("href");
$("#clickable").click(function() {
window.location = url;
return true;
})
HTML
<div id="clickable">
<!-- Other content. -->
I don't want #clickable to handle this click event.
</div>
Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.
There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:
$("#clickable").click(function(e) {
var senderElement = e.target;
// Check if sender is the <div> element e.g.
// if($(e.target).is("div")) {
window.location = url;
return true;
});
You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});
Use stopPropagation method, see an example:
$("#clickable a").click(function(e) {
e.stopPropagation();
});
As said by jQuery Docs:
stopPropagation method prevents the event from bubbling up the DOM
tree, preventing any parent handlers from being notified of the event.
Keep in mind that it does not prevent others listeners to handle this event(ex. more than one click handler for a button), if it is not the desired effect, you must use stopImmediatePropagation instead.
Here my solution for everyone out there looking for a non-jQuery code (pure javascript)
document.getElementById("clickable").addEventListener("click", function(e) {
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
Your code wont be executed if clicked on parent's children
If you do not intend to interact with the inner element/s in any case, then a CSS solution might be useful for you.
Just set the inner element/s to pointer-events: none
in your case:
.clickable > a {
pointer-events: none;
}
or to target all inner elements generally:
.clickable * {
pointer-events: none;
}
This easy hack saved me a lot of time while developing with ReactJS
Browser support could be found here: http://caniuse.com/#feat=pointer-events
Inline Alternative:
<div>
<!-- Other content. -->
<a onclick='event.stopPropagation();' href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>
You can also try this
$("#clickable").click(function(event) {
var senderElementName = event.target.tagName.toLowerCase();
if(senderElementName === 'div') {
// Do something here
} else {
// Do something with <a> tag
}
});
Writing if anyone needs (worked for me):
event.stopImmediatePropagation()
From this solution.
Using return false; or e.stopPropogation(); will not allow further code to execute. It will stop flow at this point itself.
If you have multiple elements in the clickable div, you should do this:
$('#clickable *').click(function(e){ e.stopPropagation(); });
I compare to ev.currentTarget when this is not available (React, etc).
$("#clickable").click(function(e) {
if (e.target === e.currentTarget) {
window.location = url;
return true;
}
})
Here's an example using Angular 2+
For example, if you wanted to close a Modal Component if the user clicks outside of it:
// Close the modal if the document is clicked.
#HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
this.closeModal();
}
// Don't close the modal if the modal itself is clicked.
#HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
event.stopPropagation();
}
If it is in inline context, in HTML try this:
onclick="functionCall();event.stopPropagation();
e.stopPropagation() is a correct solution, but in case you don't want to attach any event handler to your inner anchor, you can simply attach this handler to your outer div:
e => { e.target === e.currentTarget && window.location = URL; }
var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);
function innerFunction(event){
event.stopPropagation();
console.log("Inner Functiuon");
}
function outerFunction(event){
console.log("Outer Functiuon");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
<div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>
You need to stop the event from reaching (bubbling to) the parent (the div).
See the part about bubbling here, and jQuery-specific API info here.
To specify some sub element as unclickable write the css hierarchy as in the example below.
In this example I stop propagation to any elements (*) inside td inside tr inside a table with the class ".subtable"
$(document).ready(function()
{
$(".subtable tr td *").click(function (event)
{
event.stopPropagation();
});
});
You can check whether the target is not your div-element and then issue another click event on the parent after which you will "return" from the handle.
$('clickable').click(function (event) {
let div = $(event.target);
if (! div.is('div')) {
div.parent().click();
return;
}
// Then Implement your logic here
}
Here is a non jQuery solution that worked for me.
<div style="background:cyan; width:100px; height:100px;" onclick="if (event.srcElement==this) {console.log('outer');}">
<a style="background:red" onclick="console.log('inner');">Click me</a>
</div>
for those that are not using jQuery
document.querySelector('.clickable').addEventListener('click', (e) =>{
if(!e.target.classList.contains('clickable')) return
// place code here
})
In case someone had this issue using React, this is how I solved it.
scss:
#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }
#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }
Component's render():
render() {
...
return (
<div id='loginBackdrop' onClick={this.props.closeLogin}>
<div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
... [modal content] ...
</div>
</div>
)
}
By a adding an onClick function for the child modal (content div) mouse click events are prevented to reach the 'closeLogin' function of the parent element.
This did the trick for me and I was able to create a modal effect with 2 simple divs.
If a child element is clicked, then the event bubbles up to the parent and event.target !== event.currentTarget.
So in your function, you can check this and return early, i.e.:
var url = $("#clickable a").attr("href");
$("#clickable").click(function(event) {
if ( event.target !== event.currentTarget ){
// user clicked on a child and we ignore that
return;
}
window.location = url;
return true;
})
This is what you are looking for
mousedown event. this works on every DOM elements to prevent javascript focus handler like this:
$('.no-focus').mousedown(function (e) {
e.prevenDefault()
// do stuff
}
in vue.js framework, you can use modifier like this:
<span #mousedown.prevent> no focus </span>
Note that using on the input will prevent text selection handler
add a as follows:
....
or return false; from click handler for #clickable like:
$("#clickable").click(function() {
var url = $("#clickable a").attr("href");
window.location = url;
return false;
});
All solution are complicated and of jscript. Here is the simplest version:
var IsChildWindow=false;
function ParentClick()
{
if(IsChildWindow==true)
{
IsChildWindow==false;
return;
}
//do ur work here
}
function ChildClick()
{
IsChildWindow=true;
//Do ur work here
}
<a onclick="return false;" href="http://foo.example">I want to ignore my parent's onclick event.</a>
I am using polymer v1.9.1 and testing on Chrome.
I have a custom element containing a <paper-input>, and I want its text color to depend on some other property. This color is determined by the custom properties --paper-input-container-input-color or --primary-text-color, so I set a class-dependent value for those:
#input { --primary-text-color: red; }
#input.green { --primary-text-color: green; }
<paper-input id='input' class$='[[_getClasses(checked)]]'></paper-input>
_getClasses: function(checked) { return checked ? '':'green'; }
The text is always red, I guess because of this limitation in the shim (which I guess my browser must be using). So I add a call to updateStyles:
_getClasses: function(checked) {
this.async(function() {
this.$.input.updateStyles();
});
return checked ? '':'green'; }
}
Now it works correctly after checked first changes, but the initial state is incorrect (ie if checked is initially false, it is initially red but should be green). I tried adding another async(updateStyles()) to ready but no luck (yet if I call input.updateStyles() from the javascript console it corrects itself). How can I work around this?
Complete example: http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/
I've updated the plunk with the fix.
I've updated styles in attached callback instead of ready.
_getClasses: function(checked) {
return checked ? '' : 'green';
},
attached: function() {
this.updateStyles();
}
For my Angular js grid work, I am using ui-grid(v3.1.1) to implement the grid table. When I change the pagination size, I am having trouble to scroll down using mousewheel. When I hover over the mouse on scrollbar, then scroll up and down both are working fine. Strangely, the scroll up using mousewheel is working fine too. Its just the scroll down that doesn't seem to work. I fail to understand the reason for it.
I have disabled the scrolling when not required using:
.ui-grid-render-container-body .ui-grid-viewport {
overflow: auto !important;
}
Other than this I have not changed any of the default settings. Why is it that the mousewheel scroll down won't work when hovered over ui-grid? Please help
I commented out event.preventDefault() on line 2859 of v4.0.2 (in gridUtil.on.mousewheel function).
Can't say what other impact this may have, but worked for my usage.
Experienced this mousewheel/trackpad drag issue in v4.0.2 & v4.0.3 in a grid with pagination & filtering enabled and with CSS modifications to enable cell word-wrap.
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
overflow:visible;
}
.ui-grid-cell {
display : table-cell;
height: auto !important;
overflow:visible;
position: static;
}
.ui-grid-row {
height: auto !important;
display : table-row;
position: static;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
Tried Paul's fix and it worked but requires change to core code. Also, our requirements called for showing the entire table on the page based on the data rather than a fixed height table with scroll. So we couldn't use.
Instead, I worked around the issue by implementing a dynamic grid height solution.
Added ng-style to the grid as follows:
<div ui-grid="gridOptions" style="float:left" ui-grid-selection ui-grid-pagination ng-style="gridHeight()" class="myGrid"></div>
Disabled grid scrolling:
$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;
Wrote function gridHeight as follows (uses jQuery):
$scope.gridHeight = function() {
var outerHeight = 50; //buffer for things like pagination
$('.ui-grid-row').each(function() {
outerHeight += $(this).outerHeight();
});
$('.ui-grid-header').each(function() {
outerHeight += $(this).outerHeight();
});
return { height: outerHeight+"px"};
};
This satisfied our requirements.
Another way to solve this - if the grid has no scroll at least - is to redefine the prototype function atTop & atBottom on uigrid's ScrollEvent. This will not need changes to uigrid's code, one just has to inject ScrollEvent in the controller or app.run().
The grid swallows any scroll event if its possible to scroll, but does not handle it if there are no scrollbars present.
The original code also fails an isNaN check on this.y.percentage - i think it should be as it is in the comment below.
ScrollEvent.prototype.atTop = function(scrollTop) {
return true;
//return (this.y && (this.y.percentage === 0 || isNaN(this.y.percentage) || this.verticalScrollLength < 0) && scrollTop === 0);
};
ScrollEvent.prototype.atBottom = function(scrollTop) {
return true;
//return (this.y && (this.y.percentage === 1 || isNaN(this.y.percentage) || this.verticalScrollLength === 0) && scrollTop > 0);
};
This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}
I have a fieldset that has a ui-view under it.
Each view had lots of fields(a field is a directive that wraps an input) under it.
It looks something like this:
<fieldset ng-disabled='myCondition'>
<div ui-view></div> // this changes with lot's of fields that look like <div field='text-box'></div>
</fieldset>
Now, this worked great, the fields get disabled on all browsers except IE.
I've done some google and seen that ie doesn't support fieldset + disabled and I'm looking for a quick workaround.
I've tried some things that were close but not perfect and I assume I'm not the first one that needs a solution(even though I didn't find anything on google).
It has 1 line solution now.
.
Though status is fixed in Microsoft documentation Issue still not resolved!
But, Now we can also use pointer-events: none;. It will disable all input elements
fieldset[disabled] {
pointer-events: none;
}
Seems like related to IE issues, see this and related (sorry, can't post more than 2 links yet).
The first one will be fixed in next major IE release (Edge?).
The second one is still opened.
As I suspect, the problem is that user still can click into inputs inside disabled fieldset an edit them.
If so, there is "css only" workaround for IE 8+ that creates transparent overlay above disabled fieldset that prevents fieldset from being clicked.
The workaround is described in Microsoft Connect issues.
There is fiddle, that demonstrates workaround in action.
fieldset {
/* to set absolute position for :after content */
position: relative;
}
/* this will 'screen' all fieldset content from clicks */
fieldset[disabled]:after {
content: ' ';
position: absolute;
z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
/* i don't know... it was necessary to set background */
background: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}
The workaround has some limitations, see code for details.
There are some options with JavaScript.
Seems like for IE9+ you can catch mousedown events on fieldset and call e.preventDefault() if fieldset is disabled.
fieldset.onmousedown = function(e) {
if (!e) e = window.event;
if (fieldset.disabled) {
// for IE9+
if (e.preventDefault) {
e.preventDefault();
}
// for IE8-
else {
// actualy does not work
//e.returnValue = false;
}
return false;
}
}
For IE8 and below it is imposible to catch bubbling mousedown events on disabled fieldset, event handlers does not even gets called. But it is possible to catch them on fieldset ancestors, on documetn.body for exampe. But again, for IE8- you can't prevent element from being focused by preventing default action of mousedown event. See jQuery ticket #10345 for details (sorry, can't post more than 2 links). You can try to use UNSELECTABLE attribute to temporary forbid element to get focus. Something like this:
document.body.onmousedown = function(e) {
if (!e) e = window.event;
var target = e.target || e.srcElement;
if (fieldset.contains(target) && fieldset.disabled) {
// no need to do this on body!!! do it on fieldset itself
/*if (e.preventDefault) {
e.preventDefault();
}
else {*/
// this is useless
//e.returnValue = false;
// but this works
fieldset.setAttribute("UNSELECTABLE", "on");
window.setTimeout(function() { target.setAttribute("UNSELECTABLE", ""); },4);
/*}*/
return false;
}
}
I had the exact same problem, and i came up with this directive:
angular.module('module').directive('fieldset', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
if (angular.isUndefined(element.prop('disabled'))) { //only watch if the browser doesn't support disabled on fieldsets
scope.$watch(function () { return element.attr('disabled'); }, function (disabled) {
element.find('input, select, textarea').prop('disabled', disabled)
});
}
}
}
});
The feature detect is flawed though. On IEs it appears that the fieldset element (all elements it seems actually) have a 'disabled' property that is just set to false.
Edit: i just realised that it is inside an 'ng-view'. You may have to mess around with $timeouts to get it to apply the changes after the view has loaded. Or, even easier, place the fieldset inside the view.
This is a fix to disable fieldsets in IE11:
https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled
Detect IE:
Detecting IE11 using CSS Capability/Feature Detection
_:-ms-lang(x), fieldset[disabled].ie10up
{
pointer-events: none;
opacity: .65;
}
As other browser shows (disabled(/)) symbol on hover for disabled field so this change we should apply to only IE using #media
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
fieldset[disabled] {
pointer-events: none;
}
}