天道酬勤,学无止境

How to disable clicking inside div

Question

For many reasons I need to disable clicking on certain content within a div element. Due to clicking ads attacks, for example. I still want it to be visible tho.

Consider the following snippet :-

<div class="ads">
something should be here, i do not want to be clicked
</div>

how to disable the abilities of left-clicking whithin that div?

Answer1

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.

Answer2

If you want it in pure CSS:

pointer-events:none;
Answer3

Try this:

pointer-events:none

Adding above on the specified HTML element will prevents all click, state and cursor options.

http://jsfiddle.net/4hrpsrnp/

<div class="ads">
 <button id='noclick' onclick='clicked()'>Try</button>
</div>
Answer4

If using function onclick DIV and then want to disable click it again you can use this :

for (var i=0;i<document.getElementsByClassName('ads').length;i++){
    document.getElementsByClassName('ads')[i].onclick = false;
}

Example :
HTML

<div id='mybutton'>Click Me</div>

Javascript

document.getElementById('mybutton').onclick = function () {
    alert('You clicked');
    this.onclick = false;
}
Answer5

You can use css

.ads{pointer-events:none}

or Using javascript prevent event

$("selector").click(function(event){
   event.preventDefault();
});
Answer6

How to disable clicking another div click until first one popup div close

 <p class="btn1">One</p>
 <div id="box1" class="popup">
 Test Popup Box One
 <span class="close">X</span>
 </div>

 <!-- Two -->
 <p class="btn2">Two</p>
 <div id="box2" class="popup">
 Test Popup Box Two
 <span class="close">X</span>
  </div>

<style>
.disabledbutton {
 pointer-events: none;
 }

.close {
cursor: pointer;
}

</style>
<script>
$(document).ready(function(){
//One
$(".btn1").click(function(){
  $("#box1").css('display','block');
  $(".btn2,.btn3").addClass("disabledbutton");

});
$(".close").click(function(){
  $("#box1").css('display','none');
  $(".btn2,.btn3").removeClass("disabledbutton");
});
</script>

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

相关推荐
  • how to disable DIV element and everything inside [duplicate]
    Question This question already has answers here: How to disable all div content (28 answers) Closed 7 years ago. I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple <div disabled="true"> was working for me before, but for some reason it no longer works. I don't understand why. In IE10: the text "Click Me" is not greyed out and click handler still works. I actually need this working for IE10. Below is my code. <html> <script> function disableTest(){ document.getElementById("test").disabled = true; var nodes = document.getElementById("test")
  • How do you make a div tag into a link
    Question How do you make a div tag into a link. I would like my entire div to be clickable. Answer1 JS: <div onclick="location.href='url'">content</div> jQuery: $("div").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); Make sure to use cursor:pointer for these DIVs Answer2 If you're using HTML5, as pointed in this other question, you can put your div inside a: <a href="http://www.google.com"><div>Some content here</div></a> Preffer this method as it makes clear in your structure that all the content is clickable, and where it's pointing. Answer3 If you have
  • jQuery - Disable Click until all chained animations are complete
    Question Question The solution below is intended to slide down the groupDiv displaying div1 and enough space for div2 to slide in. It's all achieved by chaining the animations on the #Link.Click() element. It seems to bug out, though, when the link is clicked rapidly. Is there a way to prevent this? By perhaps disabling the Click function until the chained animations are complete? I currently have checks in place, but they don't seem to be doing the job :( Here's the code i'm using: Custom animate functions. //Slide up or down and fade in or out jQuery.fn.fadeThenSlideToggle = function(speed
  • Enable/Disable Anchor Tags using AngularJS
    Question How do I enable/disable anchor tags using the directive approach? Example: while clicking on edit link, create & delete needs to be disabled or grayed out while clicking on create link, edit & delete needs to be disabled or grayed out JAVASCRIPT: angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){ $scope.create = function(){ console.log("inside create"); }; $scope.edit = function(){ console.log("inside edit"); }; $scope.delete = function(){ console.log("inside delete"); }; }]).directive('a', function() { return { restrict: 'E', link: function(scope, elem
  • How can I conditionally disable the routerLink attribute?
    Question In my Angular 2 application I'm trying to disable a routerLink without any success. I've tried to handle the click event on the click event (with event.preventDefault() and event.stopPropagation()) but it doesn't work. How can I disable a routerLink? Answer1 Disable pointer-events on the element via CSS: <a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a> a.disabled { pointer-events: none; cursor: default; } See also Angular2, what is the correct way to disable an anchor element? or <a *ngIf="isEnabled" [routerlink]="xxx">Link</a> <div *ngIf="!isEnabled">not a
  • if statement in ng-click
    Question Is there a way to put a condition inside an ng-click? Here, I want that the form is not submitted if there are any form errors, but then I got a parse exception. <input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit"> I tried to use ng-disabled but then my validation plugin does not work cause form is never submitted at all, so it is not triggered. Answer1 Don't put any Condition Expression in Template. Do it at the Controller. Template: <input ng-click="check(profileForm.$valid)" name="submit" id="submit"
  • how to disable certain links of jquery accordion
    Question I am currently implemented a jquery based accordion on a navigation section, but some parts of the navigation don't need to be part of the accordion (if there are no categories etc) i am just wondering if it is possible to disable parts of the accordion or not ? i get the feeling this could be impossible but this site has surprised me before :) Thanks very much. Answer1 You can put classes on the things you want to disable. Then do : jQuery(".toDisable").live("click", function (){return false;}); or something similar Answer2 Previous trick does not work because of the binding order of
  • How to make an ng-click event conditional?
    Question I have this code inside ng-repeat: <a href="#" class="disabled" ng-click="doSomething(object)">Do something</a> How to make a condition that the button is disabled when it has class="disabled"? Or is there a way to do it in Javascript so that will look like: $('.do-something-button').click(function(){ if (!$(this).hasClass('disabled')) { do something } }); Answer1 It is not good to manipulate with DOM (including checking of attributes) in any place except directives. You can add into scope some value indicating if link should be disabled. But other problem is that ngDisabled does not
  • How to usemultiple Angular UI Bootstrap Datepicker in single form?
    Question I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work. This is my HTML sample: <label>First Date</label> <div class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> <span class="input-group
  • Prevent body scrolling but allow overlay scrolling
    Question I've been searching for a "lightbox" type solution that allows this but haven't found one yet (please, suggest if you know of any). The behavior I'm trying to recreate is just like what you'd see at Pinterest when clicking on an image. The overlay is scrollable (as in the whole overlay moves up like a page on top of a page) but the body behind the overlay is fixed. I attempted to create this with just CSS (i.e. a div overlay on top of the whole page and body with overflow: hidden), but it doesn't prevent div from being scrollable. How to keep the body/page from scrolling but keep
  • How to disable all div content
    Question I was under the assumption that if I disabled a div, all content got disabled too. However, the content is grayed but I can still interact with it. Is there a way to do that? (disable a div and get all content disabled also) Answer1 Many of the above answers only work on form elements. A simple way to disable any DIV including its contents is to just disable mouse interaction. For example: $("#mydiv").addClass("disabledbutton"); CSS .disabledbutton { pointer-events: none; opacity: 0.4; } Supplement: Many commented like these: "This will only disallow mouse events, but the control is
  • Fieldset and disabling all child inputs - Work around for IE
    Question 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
  • ReactJs: Prevent multiple times button press
    Question In my React component I have a button meant to send some data over AJAX when clicked. I need to happen only the first time, i.e. to disable the button after it's first use. How I'm trying to do this: var UploadArea = React.createClass({ getInitialState() { return { showUploadButton: true }; }, disableUploadButton(callback) { this.setState({ showUploadButton: false }, callback); }, // This was simpler before I started trying everything I could think of onClickUploadFile() { if (!this.state.showUploadButton) { return; } this.disableUploadButton(function() { $.ajax({ [...] }); }); }
  • Preventing / dealing with double button clicks in angular
    Question In angular we can set up a button to send ajax requests like this in view: ... ng-click="button-click" and in controller: ... $scope.buttonClicked = function() { ... ... // make ajax request ... ... } So to prevent a double submit I could set a flag to buttonclicked = true when a button is click and unset it when the ajax callback is finished. But, even then control is handled back to angular who will updates to the Dom. That means there is a tiny window where the button could be clicked again before the original button click has completely 100% finished. It's a small window but can
  • Imitating element-ui to encapsulate the vue component library (3)
    Five, encapsulate an element-ui style input component Parameter support: parameter nameParameter DescriptionParameter TypeDefaults placeholderPlaceholder stringno type Text box type (text/password) string text disabledDisable boolean false clearableWhether to show the clear button boolean false show-passwordWhether to display the password switch button boolean false name name attribute stringno Event support: Event nameEvent description blurLoss of focus event changeContent change event focusGet focus event 5.1 The basic framework and style of input components and the handling of placeholde
  • How to enable Bootstrap tooltip on disabled button?
    Question I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse. What is the best way to invert this behaviour? $('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
  • How to empty the message in a text area with jquery?
    Question --UPDATED-- I want to empty message in a textarea in callback. Can anyone tell me how to empty it please? I tried $("#message").empty(), but it does not empty it. Thanks in advance. <form method="post" id="form" action="index.php/admin/messages/insertShoutBox"> <input name="user" id="nick" value="admin" type="hidden"> <p class="messagelabel"><label class="messagelabel">Message</label> <textarea id="message" name="message" rows="2" cols="40"></textarea> <input disabled="disabled" id="send" value="Sending..." type="submit"></p> </form> Full code $("#form").submit(function(){ if
  • How to automate shadow DOM elements using selenium?
    Question I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method. I have tried the following solutions: deep css (Don't work on latest chrome browser) JS Executor. (This is really tedious and becomes complex to maintain) Note: If you know any other solution other than listed above that I can implement in Selenium Java framework , please pass on the solution. Thanks in advance !. Answer1 There is a very good plugin that can be used with selenium project link
  • How to make 'submit' button disabled?
    Question How to disable the "Submit" button until the form is valid? Does angular2 have an equivalent to ng-disabled that can be used on the Submit button? (ng-disabled doesn't work for me.) Answer1 As seen in this Angular example, there is a way to disable a button until the whole form is valid: <button type="submit" [disabled]="!ngForm.valid">Submit</button> Answer2 in Angular 2.x.x , 4, 5 ... <form #loginForm="ngForm"> <input type="text" required> <button type="submit" [disabled]="loginForm.form.invalid">Submit</button> </form> Answer3 .html <form [formGroup]="contactForm"> <button
  • disable all the elements in html
    Question How can we disable all the elements in html through javascript.The easiest way... Answer1 I suggest to do it the "Lightbox"-style way. Add an absolute positioned, transparent, full screen div Layer above the Page. This way, the user can't even click on a Link. To give the user a visual feedback that the page is disabled, you can make the div e. g. 50% transparent black. BTW, here is also a jQuery Plugin that uses a similar technique. Answer2 The easiest way is to put all form elements you want to disable inside a <fieldset> and then disable the fieldset itself. An example: http:/