天道酬勤,学无止境

How to prevent the click event using CSS?

问题

如何使用 CSS 防止点击事件?

我已经创建了表单页面,那么我需要防止仅使用 CSS 的点击事件吗?
我已经尝试过这个 css 属性,但没有奏效。

<div>Content</div>
div {
  display: none;
}
回答1
.noClick {
   pointer-events: none;
}
标签

受限制的 HTML

  • 允许的HTML标签:<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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • How to prevent the click event using CSS?
    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; }
  • jquery防止触摸悬停功能(jquery preventing hover function on touch)
    问题 我有一个悬停功能,如果它是一个触摸设备,我希望悬停事件不会发生。 问题是当您使用触摸设备点击链接时,它会在点击事件之前执行悬停事件,因此您必须点击它两次才能使其工作。 这是悬停功能: $("#close").hover( function () { $("#close_2").css({ display: "none" }); $("#close_1").css({ display: "block" }); }, function () { $("#close_1").css({ display: "none" }); $("#close_2").css({ display: "block" });; } ); 然后我将其设置为点击功能: $('#close').click(function() { var id = $(this).attr('id'); $('#full_image').animate({ height: 0 }, 300, function() { $('#full_image img').attr('src','#'); }); $("#close_1").css({ display: "none" }); $("#close_2").css({ display: "none" }); $("#close").css({ display: "none"
  • 如何防止文档正文上的点击事件(可能是 Cordova 中的错误?)(How to prevent click events on the document body (maybe a bug in Cordova?))
    问题
  • css / jquery 中的移动(触摸)设备友好下拉菜单(Mobile (touch) device friendly drop down menu in css / jquery)
    问题 我一直在阅读有关此主题的许多主题,这是一个在移动设备上友好的下拉菜单。 很多时候,最好在下拉菜单上进行非悬停操作。 有一些解决方法,其中一个是下拉项的主要超链接应该链接到一个主题标签。 这使得它可以在移动设备上运行,但对于普通的桌面用户来说,这会令人困惑。 所以解决方案是为桌面用户提供一个普通的下拉菜单,其中第一个超链接也链接到一个页面。 对于移动用户,点击一个项目将打开下拉菜单,但第二次点击主项目将打开相应的页面。 我看过以下网站,不知何故他们的菜单就像那样:http://www.hgtv.com/ 你可以在平板电脑上查看这个,然后点击主菜单,再次点击那个项目,你就会明白我的意思. 但是我怎样才能为我自己的网站找到或下载完全相似的设置呢? 提前致谢 回答1 您将必须处理多个事件才能在移动和桌面浏览器中获得该功能。 如果您查看该示例菜单,您可以将鼠标悬停以展开,而在移动设备上,您需要单击/触摸来展开。 我尝试实现此目的的一种方法是为桌面使用“悬停”侦听器,但为移动设备使用“触摸”事件侦听器。 为此,您必须向 jQuery 添加一个自定义事件,例如“触摸”。 请参阅下面的帖子以了解如何做到这一点: 如何在 iPad 的 Safari 中使用 jQuery 识别触摸事件? 是否可以? 回答2 这是我的工作: function isTouchDevice(){ return
  • 防止“冒泡”? [复制](Prevent "bubbling"? [duplicate])
    问题 这个问题在这里已经有了答案: jquery 停止子触发父事件(7 个回答) 7年前关闭。 我不确定这是否真的在冒泡,我会解释一下。 我有这个: <div> <div> text here </div> </div> 如何绑定点击事件,使其仅影响封闭的 div? 如果我这样设置: jQuery('div').bind('click', function() { jQuery(this).css('background','blue'); }); 它使所有 div 变为蓝色。 如果我将 false 作为第三个参数(防止冒泡)添加到绑定函数,它什么都不做。 我该如何解决这个问题? 回答1 http://api.jquery.com/event.stopPropagation/ 添加event.stopPropagation(); 里面的hander。 (不过,为嵌套的 DIV 分配一个 ID 或类可能会更好,这样您就可以确定它是唯一受影响的。) 回答2 您确实应该使用 ID 或类等标识符,但对于您的示例,您可以这样做: jQuery('div > div').bind('click', function() { jQuery(this).css('background','blue'); }); ...这会将处理程序绑定到任何div ,该div是另一个div的直接后代。 因此
  • 防止点击父按钮的字体真棒图标(Font-Awesome icon preventing click in parent button)
    问题
  • 双击后阻止文本选择(Prevent text selection after double click)
    问题 我正在处理Web应用程序中跨度的dblclick事件。 副作用是双击可以选择页面上的文本。 如何防止这种选择发生? 回答1 function clearSelection() { if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { var sel = window.getSelection(); sel.removeAllRanges(); } } 您还可以将这些样式应用于所有非IE浏览器和IE10的跨度: span.no_selection { user-select: none; /* standard syntax */ -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ } 回答2 用简单的javascript: element
  • 在触摸设备上的浏览器中禁用双击“缩放”选项(Disable double-tap “zoom” option in browser on touch devices)
    问题 我想禁用浏览器(在触摸设备上)中指定元素上的双击缩放功能,而不禁用所有缩放功能。 例如:一个元素可以被多次点击以使某些事情发生。 在桌面浏览器上(按预期方式),此方法工作正常,但在触摸设备浏览器上,它将放大。 回答1 注意(自2020年8月4日起):此解决方案似乎无法在iOS Safari v12 +中运行。 一旦找到涵盖iOS Safari的明确解决方案,我将更新此答案并删除此注释。 纯CSS解决方案 对要禁用双击缩放的任何元素添加“ touch-action: manipulation ,例如以下disable-dbl-tap-zoom类: .disable-dbl-tap-zoom { touch-action: manipulation; } 从触摸操作文档(重点是我的): 操纵启用平移和收缩缩放手势,但禁用其他非标准手势,例如双击以缩放。 此值适用于Android和iOS。 回答2 <head> <title>Site</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> etc... </head> 我最近使用过它,并且在iPad上可以正常使用。 尚未在Android或其他设备上进行测试
  • 如何禁用在div内单击(How to disable clicking inside div)
    问题 由于许多原因,我需要禁用div元素中某些内容的单击。 例如,由于点击广告攻击。 我仍然希望它是可见的。 考虑以下代码段: <div class="ads"> something should be here, i do not want to be clicked </div> 如何禁用在该div单击鼠标左键的功能? 回答1 可以使用的CSS属性是: pointer-events:none 重要!请记住,Opera Mini和IE 10及以下版本(含)不支持此属性。 这些浏览器需要另一种解决方案。 jQuery方法如果您想通过脚本而不是CSS属性禁用它,则可以为您提供帮助:如果您使用的是jQuery 1.4.3+版本: $('selector').click(false); 如果不: $('selector').click(function(){return false;}); 引用自:jquery-禁用单击 您可以通过pointer-events: auto;重新启用点击pointer-events: auto; (文件) 需要注意的是指针的事件重写光标属性,所以如果你想光标比标准以外的东西,你的CSS应该是经过地方pointer-events 。 回答2 如果您希望使用纯CSS: pointer-events:none; 回答3 试试这个: pointer-events
  • 如何在JSF中进行双击预防(How to do double-click prevention in JSF)
    问题 我们有一些搜索页面,它们会处理大量数据,并且需要一段时间才能完成。 当用户点击搜索按钮时,我们不想让他们第二次提交搜索结果。 在JSF中进行“双击”检测/预防是否有最佳实践? PrimeFaces组件似乎可以完成我们想要的操作,因为它会在单击搜索按钮到搜索完成之间的一段时间内禁用UI,但是有没有更通用的策略可供我们使用(也许这是不可行的)依靠PrimeFaces)? 理想情况下,在搜索完成之前,将禁用或忽略对按钮的任何单击。 我们不一定需要禁用整个UI(因为blockUI允许您这样做)。 回答1 如果仅使用ajax请求,则可以jsf.ajax.addOnEvent使用JSF JavaScript API的jsf.ajax.addOnEvent处理程序。 以下示例将适用于所有type="submit"按钮。 function handleDisableButton(data) { if (data.source.type != "submit") { return; } switch (data.status) { case "begin": data.source.disabled = true; break; case "complete": data.source.disabled = false; break; } } jsf.ajax.addOnEvent
  • 防止孩子触发父母的点击事件(Preventing Child from firing parent's click event)
    问题 考虑以下代码段: <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> 现在,假设外部div具有与之相关联的实时click 。 当我在内部div任意位置click时,如何确保不触发实时click ? 编辑: 这是要求的JS $(".div-outer").live("click",function(){alert("hi")}); 单击“ .inner-div”时,不应触发此操作 回答1 您必须向内部子级添加事件侦听器,并取消事件的传播。 在普通JS中,类似 document.getElementById('inner').addEventListener('click',function (event){ event.stopPropagation(); }); 足够了。 请注意,jQuery提供了相同的功能: $(".inner-div").click(function(event){ event
  • 防止 Bootstrap 下拉菜单在点击时关闭 [重复](Prevent Bootstrap dropdown from closing on clicks [duplicate])
    问题 这个问题在这里已经有了答案: 在下拉菜单中单击时如何防止它关闭? (2 个回答) 3年前关闭。 我的菜单使用 Bootstrap 3,我无法阻止下拉菜单在点击时关闭。 我该怎么做? 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 $('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // Add close animation
  • 防止在 Chrome 中单击链接时更改光标(Preventing cursor change on link click in Chrome)
    问题
  • 防止输入范围 html 元素上的 mousedown 事件并仍然让用户拖动滑块(Prevent mousedown event on input range html element and still let user drag slider)
    问题 那么有没有办法在输入范围元素上禁用鼠标按下和/或单击事件,但同时让用户拖动滑块并仍然触发更改事件? 禁用在线点击,但仍然允许拖动滑块。 我想阻止用户在滑块中间跳跃(用鼠标按下/点击),但我想让他们拖动它以便值改变。 <input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" /> 这无济于事,因为范围的变化被调用并弄乱了数字。 $slider.on('mousedown', function(event) { //event.preventDefault(); this.value = -1; /* Act on the event */ console.log("mousedown"); }); $slider.on('click', function(event) { event.preventDefault(); this.value = -1; /* Act on the event */ console.log("click"); }); 如果我调用event.preventDefault(); 在 mousedown 滑块上不起作用,无法拖动。 有没有办法解决这个问题。 我正在尝试在 html 中重新创建这种效果是否有这种缩放的 jQuery 效果? 回答1
  • 如何为没有 js 的用户正确使用 javascript-links(How to properly use javascript-links for users without js)
    问题 我希望我不会在这里创建重复项,但我真的不知道要寻找什么/还没有找到任何有用的东西。 我的页面上有几个链接 ( <a> ) 会触发 jquery click() 处理程序,它将在不重新加载的情况下将新页面加载到 div 中。 为了让非 javascript 用户可以使用这些链接,我想将它们链接到同一页面(这就是我使用 s 而不仅仅是任何 div/span/button 的原因)。 问题是脚本无论如何都会重新加载,所以你可以说 jaavascript 被覆盖了。 那么如何防止浏览器使用该链接作为与 javascript 的链接呢? 或者让非javascript用户也能够正确使用网站的正确解决方案是什么? 我自己能想出的唯一解决方案就是使用按钮,但我发现它非常笨重,因为我必须使用表单,尽管我只通过GET提交 1 个变量,该变量仅在链接本身中指定。 感谢帮助 :) 回答1 如果您return false给 click 事件处理程序,则它不会执行默认操作,在您的情况下,它将遵循指向新页面的链接... $('a').click(function(e) { // process your event... return false; }); 然后,如果 javascript 被禁用,它将按照预期跟随<a>标签到新的href 。 回答2 对于你正在做的事情
  • 防止 Google Maps iframe 捕获鼠标的滚轮行为 [重复](Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior [duplicate])
    问题 这个问题在这里已经有了答案: 在嵌入式 Google 地图上禁用鼠标滚轮缩放(31 个回答) 6年前关闭。 如果您使用触控板或鼠标浏览嵌入式地图 iframe,您可能会陷入地图的缩放功能,这真的很烦人。 在这里试试:https://developers.google.com/maps/documentation/embed/guide#overview 有没有办法防止这种情况? 回答1 这已在此处得到解答 => Bogdan 在嵌入式 Google 地图上禁用鼠标滚轮缩放。 它的作用是禁用鼠标,直到您单击地图并且鼠标再次开始工作,如果您将鼠标从地图上移出,鼠标将再次被禁用。 注意:不适用于 IE < 11(在 IE 11 上工作正常) CSS: <style> .scrolloff { pointer-events: none; } </style> 脚本: <script> $(document).ready(function () { // you want to enable the pointer events only on click; $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready $('#canvas1').on('click'
  • twitter bootstrap“dismissible popover”(data-trigger =“focus”)如何防止弹出div隐藏?(How to prevent the popover div for hiding on clicking inside it for twitter bootstrap “dismissible popover”(data-trigger=“focus”)?)
    问题 我有一个可关闭的 popover(data-trigger="focus") ,里面有一个文本框。 但是,只要我在文本框内单击以键入它就会因为“data-trigger="focus”而消失。如何使 div 智能地在单击时不会在其中消失?这是我的 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">Click Here</a></div></body> 这是我的 jquery: $(document).ready(function(){ $('.BookAppButton').click(function(event){ event.preventDefault(); console
  • 如何使用 angularJS 将可拖动指令应用于引导模式?(How can i apply a draggable directive to bootstrap modal using angularJS?)
    问题 我在我的 Angular 应用程序中使用引导模式,它工作正常。 我需要使它可拖动和调整大小,所以我定义了一个指令。 现在的问题是它被应用于模态窗口内的内容,因此模态窗口变得透明。 打开窗口时如何将可拖动指令分配给模态窗口? 这是代码, 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> 应用程序.js: var routerApp = angular.module('DiginRt', ['ui.bootstrap','ngRoute']); routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal', function($scope, $modal) { $scope.openSettings = function(widget) { $modal.open({ scope: $scope, templateUrl: 'chart
  • 如何防止点击队列建立,在 jquery 中使用切换? 尝试使用绑定/解除绑定('点击')(how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click'))
    问题 我想在显示切换动画时禁用点击处理程序,这样动画就不会因为多次快速点击而建立起来。 谢谢 jQuery 脚本: $("#button").click({ $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')}); }); html代码 <div <a href='#' id='button'>Toggle</a> <div> test </div> </div> 回答1 如前所述,您对事件附件的实现已损坏。 最重要的是,jQuery 中有一个名为 .stop 的方法,它使您无需使用绑定/解除绑定。 $("#button").click(function(){ $(this).next().stop().toggle("slow"); }); 它所做的只是清除动画队列并停止当前动画,让您启动下一个动画。 jQuery 文档上的停止功能。 请注意,它有两个属性 - clearQueue 和 goToEnd。 阅读有关更稳健地使用此方法的更多信息。 回答2 首先,您附加事件的方式被破坏了。 我不知道这是否只是匆忙提出问题或代码中的真正错误,但这是设置处理程序的正确方法: $("#button").click(function(evt) { // <- you need to
  • 你能阻止 Angular 组件的主机点击触发吗?(Can you prevent an Angular component's host click from firing?)
    问题 我正在创建一个 Angular 组件,该组件包含具有一些附加功能的本机<button>元素。 如果按钮被禁用并且我想复制相同的功能,则它们不会触发单击事件。 即,给定: <my-button (click)="onClick()" [isDisabled]="true">Save</my-button> 有没有办法让my-button防止onClick()被调用? 在 Angular 中,您可以通过这种方式监听主机点击事件,并停止事件的传播: //Inside my-button component @HostListener('click', ['$event']) onHostClick(event: MouseEvent) { event.stopPropagation(); } 这可以防止事件冒泡到祖先元素,但不会阻止内置(click)输出在同一宿主元素上触发。 有没有办法做到这一点? 编辑 1:我现在解决这个问题的方法是使用名为“onClick”的不同输出,消费者必须知道使用“onClick”而不是“click”。 这并不理想。 编辑 2:成功停止源自<button>元素的单击事件。 但是,如果您像我一样将元素放在按钮标签内,那么这些目标上的点击事件就会传播到主机。 嗯,应该可以将按钮包装在另一个停止传播的元素中...... 回答1 您可以执行以下操作: