天道酬勤,学无止境

How to prevent the click event using CSS?

Question

How to prevent the click event using CSS ?

I have created the form page , then i need to prevent the click event using only CSS?
I have tried this css property, but not worked.

<div>Content</div>
div {
  display: none;
}
Answer1

You can try the css class:

.noClick {
   pointer-events: none;
}
标签

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.

相关推荐
  • jquery preventing hover function on touch
    Question I have a hover function, if it's a touch device I'd like the hover event to NOT happen. The problem is when you tap the link with a touch device it does the hover event before doing the click event, so you have to tap it twice for it to work. this is the hover function: $("#close").hover( function () { $("#close_2").css({ display: "none" }); $("#close_1").css({ display: "block" }); }, function () { $("#close_1").css({ display: "none" }); $("#close_2").css({ display: "block" });; } ); and then I have this set up as the click function: $('#close').click(function() { var id = $(this)
  • How to prevent click events on the document body (maybe a bug in Cordova?)
    Question I'm a beginner trying to develop a mobile phone game with with Kinetic Js and "phonegap build". I am experiencing a problem which I don't know how to address. I made some tests: I just pasted this code here into my index.html and sent the code to the phonegap build which created the apk file from the html code. The app works quite fine but if you play a little bit you may see an undesired behavior: the entire "stage" can be clicked with a touch and when it happens (it's actually not easy to do it on purpose, but it happens) you hear the standard click sound of the android OS and you
  • Mobile (touch) device friendly drop down menu in css / jquery
    Question I have been reading many topics on this subject, a drop down menu which is friendly on mobile devices. Many times it is considered best to have a non-hover action on the drop down menu. There are workarounds, with one being that the main hyperlink for the drop down item should link to a hashtag. This makes it work on mobile devices but for the normal desktop user, this would be confusing. So the solution would be to have a normal drop down menu for desktop users in which the first hyperlink also links to a page. For mobile users, the tap on an item will open the drop down menu, but a
  • Prevent "bubbling"? [duplicate]
    Question This question already has answers here: jquery stop child triggering parent event (7 answers) Closed 7 years ago. I am not sure this is really bubbling, I will explain. I have this: <div> <div> text here </div> </div> How to bind an on click event so that it will affect only the enclosed div? If I set it like this: jQuery('div').bind('click', function() { jQuery(this).css('background','blue'); }); it makes blue all the divs. If I add false as the third argument(prevent bubbling) to the bind function it does nothing. How can I solved this? Answer1 http://api.jquery.com/event
  • Font-Awesome icon preventing click in parent button
    Question I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button. Here's an example button: <button class="btn btn-mini"> <i class="icon-edit"></i> </button> And here's what it looks like with bootstrap Any ideas for why those left two pixels don't trigger a click event? Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com Answer1 I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click
  • Prevent text selection after double click
    Question I'm handling the dblclick event on a span in my web app. A side-effect is that the double click selects text on the page. How can I prevent this selection from happening? Answer1 function clearSelection() { if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { var sel = window.getSelection(); sel.removeAllRanges(); } } You can also apply these styles to the span for all non-IE browsers and IE10: span.no_selection { user-select: none; /* standard syntax */ -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz
  • Disable double-tap “zoom” option in browser on touch devices
    Question I want to disable the double-tap zoom functionality on specified elements in the browser (on touch devices), without disabling all the zoom functionality. For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in. Answer1 Note (as of 2020-08-04): this solution does not appear to work in iOS Safari v12+. I will update this answer and delete this note once I find a clear solution that covers iOS Safari. CSS-only solution Add touch-action: manipulation to any element on
  • 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
  • How to do double-click prevention in JSF
    Question We have a few search pages that run against a lot of data and take a while to complete. When a user clicks on the search button, we'd like to not allow them to submit the search result a second time. Is there a best practice for doing "double-click" detection/prevention in JSF? The PrimeFaces component seems like it can do what we want as it will disable the UI for a period of time between when the search button is clicked and when the search completes, but is there a more generic strategy we can use (perhaps something that isnt reliant on PrimeFaces)? Ideally, any click of the button
  • Preventing Child from firing parent's click event
    Question Consider the following snippet: <div class="div-outer"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class="div-inner" style="background:red"> Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae. </div> </div> Now suppose the outer div has a live click associated with it. How do I make sure that the live click is not triggered when I click anywhere in the inner div? Edit: Here's the JS as requested $(".div-outer").live("click",function(){alert("hi")}); This should not be triggereed when clicking on ".inner-div" Answer1 You have to add an event listener to
  • Prevent Bootstrap dropdown from closing on clicks [duplicate]
    Question This question already has answers here: How do I prevent my dropdown from closing when clicking inside it? (2 answers) Closed 3 years ago. My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it? JSFiddle // Add open class if active $('.sidebar-nav').find('li.dropdown.active').addClass('open'); // Open submenu if active $('.sidebar-nav').find('li.dropdown.open ul').css("display","block"); // Change active menu $(".sidebar-nav > li").click(function(){ $(".sidebar-nav > li").removeClass("active"); $(this).addClass("active"); }); // Add open animation
  • Preventing cursor change on link click in Chrome
    Question Clicking on a link in Chrome (not Safari or Firefox) changes the cursor from pointer to arrow. Can this behavior be prevented? I.e., is it possible to still have the pointer after clicking, but while the cursor is still hovering over the link? EDIT: Okay so I've done a little more testing. First of all, the only reason anyone would want the cursor to remain as a pointer after clicking on a link is if the link does not actually load another page but rather fires a JS event instead. <a href="test">Test</a> // JQuery $("a").click(function(event) { event.preventDefault(); } With the above
  • Prevent mousedown event on input range html element and still let user drag slider
    Question So is there a way to disable mousedown and / or click event on input range element but at the same time let user drag slider around and still fire on change event? Disable clicking on line but still enable slider to be dragged around. I would like to prevent users to jump (with mousedown / click) in the middle of slider but I wanna let them drag it so value changes. <input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" /> This does not help as on change for range gets called and messes up numbers. $slider.on('mousedown', function(event) { //event
  • How to properly use javascript-links for users without js
    Question I hope I'm not creating a duplicate here, but I just don't really know what to look for/didn't find anything useful yet. I got several links (<a>) on my page that trigger the jquery click() handler, which will load a new page into a div without reload. To make those links available to non-javascript users, I want to link them to the same page (that's why I'm using s and not just any div/span/button). Propblem with that is that the script will reload anyway, so you can say jaavascript is overwritten. So how do I prevent the browser using the link as a link with javascript? Or what's
  • Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior [duplicate]
    Question This question already has answers here: Disable mouse scroll wheel zoom on embedded Google Maps (31 answers) Closed 6 years ago. If you're browsing with an embedded maps iframe using your trackpad or mouse, you can potentially trap yourself into the Maps' zooming capabilities, which is really annoying. Try it here: https://developers.google.com/maps/documentation/embed/guide#overview Is there a way to prevent this? Answer1 This has been answered here => Disable mouse scroll wheel zoom on embedded Google Maps by Bogdan. What it does is that it will disable the mouse until you click
  • How to prevent the popover div for hiding on clicking inside it for twitter bootstrap “dismissible popover”(data-trigger=“focus”)?
    Question I have a a dismissible popover(data-trigger="focus") with a text box inside it. But as soon as I click inside the text box to type it dissappear because of the "data-trigger="focus". How do I make the div intelligently not disappear on click inside it? Here is my html : <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head> <body><div><a class="BookAppButton" href="" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="focus"
  • How can i apply a draggable directive to bootstrap modal using angularJS?
    Question I am using bootstrap modal in my Angular Application, it works fine. I need to make it draggable and resizeable, so i have defined a directive. The issue now is it getting applied to the content inside the modal window, hence the modal window becomes transparent. how can i assign the draggable directive to the modal window when opening the window? Here is the code, HTML: <div ng-controller="CustomWidgetCtrl"> <div class="box-header-btns pull-right" style="top:10px" > <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> </div> </div> App.js
  • how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click')
    Question i want to disable the click handler when the toggle animation is showing so the animation won't build up because of multiple fast click. thanks jquery script: $("#button").click({ $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')}); }); html code <div <a href='#' id='button'>Toggle</a> <div> test </div> </div> Answer1 As mentioned your implementation of event attachment is broken. On top of that there is a method in jQuery called .stop which releases you from needing to use bind/unbind. $("#button").click(function(){ $(this).next().stop().toggle("slow"
  • Can you prevent an Angular component's host click from firing?
    Question I'm creating an Angular component that wraps a native <button> element with some additional features. Buttons do not fire a click event if they're disabled and I want to replicate the same functionality. i.e., given: <my-button (click)="onClick()" [isDisabled]="true">Save</my-button> Is there a way for my-button to prevent onClick() from getting called? In Angular you can listen to the host click event this way, and stop propagation of the event: //Inside my-button component @HostListener('click', ['$event']) onHostClick(event: MouseEvent) { event.stopPropagation(); } This prevents
  • iPad/iPhone hover problem causes the user to double click a link
    Question I have some websites I built times ago, that use jquery mouse events...I just got an ipad and i noticed that all the mouse over events are translated in clicks...so for instance i have to do two clicks instead of one..(the first hover, than the actual click) is there a workaround ready to solve this? maybe a jquery command i shoudl have used instead of mouseover/out etc.. thanks! Answer1 Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting. $('a').on('click touchend', function(e) { var el = $(this); var link = el.attr('href'