Prevent Clicking Through Div

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 cursor, 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/.GIFs 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



Leave a reply



Submit