How to disable clicking inside div
The CSS property that can be used is:
pointer-events:none
!IMPORTANT
Keep in mind that this property is not supported by Opera Mini and IE 10 and below (inclusive). Another solution is needed for these browsers.
jQuery METHOD
If you want to disable it via script and not CSS property, these can help you out:
If you're using jQuery versions 1.4.3+:
$('selector').click(false);
If not:
$('selector').click(function(){return false;});
- Referenced from :
jquery - disable click
You can re-enable clicks with pointer-events: auto;
(Documentation)
Note that pointer-events
overrides the cursor
property, so if you want the cursor to be something other than the standard , your css should be place after pointer-events
.
How to prevent the click event using CSS?
You can try the css class:
.noClick {
pointer-events: none;
}
Click through div to underlying elements
Yes, you CAN do this.
Using pointer-events: none
along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.
Using AlphaImageLoader
, you can even put transparent .PNG/.GIF
s in the overlay div
and have clicks flow through to elements underneath.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
How to prevent a click() event through a child div to a parent div in jQuery?
You need to stop the event from propagating up the DOM tree:
$('.closeBtn').click(function (evt) {
evt.stopPropagation();
// Your code here
});
prevent click on div to underlying a href
ok in order to get it to work i had to add the $event.stopPropagation(); and the $event.preventDefault() in the ng-click so it became finally as this, thanks @WrkOnMyMachine for the help and me getting in the right direction (oh and completely ignore the $(document).ready......) this is the working version.
<div style="margin-top:110px;" id="favoritecdlist" ng-controller="UserController">
<div class="cdscrollcontainer" ng-repeat="cd in favoriteCds">
<a href="~/cd/{{cd.id_cd}}" class="cdscrollcell" id="{{cd.id_program}}">
<div class="favorite-delete" ng-click="RemoveCDFromFavoriteList(cd.id_cd); $event.stopPropagation(); $event.preventDefault()">x</div>
<img class="cdimage" ng-src="{{cd.url}}">
<div class="cdimagebackground">
<div class="cdtitle">{{cd.cdName}} ({{cd.ReleaseYear}})</div>
</div>
</a>
</div>
how do I ignore div click when button is clicked?
You should use event.stopPropagation()
to stop the bubbling of event to the containing parent div
.
function bar(event){ event.stopPropagation(); alert('button clicked')}
function foo(event){ alert('div clicked')}
<div onclick="foo()"> <button onclick="bar(event)"/></div>
Prevent click action for div if the border of the div is clicked
I have tried to achieve with my own HTML and CSS, but you can change accordingly.
If .parent
is clicked, I am taking note of it and then checking it with .child
click.
WORKING FIDDLE
HTML
<div class=parent>
<div class=child>
</div>
</div>
CSS
.parent{
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
padding:15px;
background-color:red
}
.child{
display:inline-block;
width:300px;
height:300px;
background-color:blue
}
JQUERY
$(document).ready(function(){
var flag=false;
$(".parent").click(function(){
flag=true;
});
$(".child").click(function(e){
if(flag==false){
alert("CHILD IS ALIVE");
}
});
});
How to prevent modal click-through?
You're using the onclick
handler, which essentially ignores all the propegation through down-up events. Try using onmousedown
. Chances are the thing underneath the modal has a down or up event. Learn about "bubbling" : What is event bubbling and capturing?
<button onMouseDown={this.toggleView} ... yada yada
Using the mousedown will allow you to prevent bubbling through the stopPropegation
, and maybe also look into stopImmediatePropegation
-- which prevents other listeners of the same type (click, down, up) from getting called: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation
Related Topics
How to Make Ng-Select Remove-And-Read-Only
Css Customized Scroll Bar in Div
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Is There a CSS Selector For Text Nodes
Targeting Only Firefox With Css
Css Reset - What Exactly Does It Do
How to Style Child Components from Parent Component'S CSS File
Any Recommendations For a CSS Minifier
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Align Inline-Block Divs to Top of Container Element
What Do Commas and Spaces in Multiple Classes Mean in Css
Transparent Text Cut Out of Background
Why Isn't It Possible to Combine Vendor-Specific Pseudo-Elements/Classes into One Rule Set