文章/答案/技术大牛

发布

css禁止鼠标点击

CSS禁止鼠标点击

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制元素的布局、颜色、字体等视觉效果。禁止鼠标点击通常是通过CSS来改变元素的交互性，使得用户无法通过鼠标点击触发任何事件。

类型

** pointer-events**：CSS属性 pointer-events 可以用来控制元素是否可以被鼠标事件所触及。
- pointer-events: none;：元素不会接收任何鼠标事件，也不会触发任何事件处理器。
- pointer-events: auto;：元素会正常接收鼠标事件。

应用场景

禁用按钮：当按钮处于不可用状态时，可以通过CSS禁用点击。
保护敏感区域：在某些页面上，可能需要保护某些区域不被用户误点击。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS禁止鼠标点击示例</title>
    <style>
        .disabled-button {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button class="disabled-button">禁用按钮</button>
    <button>正常按钮</button>
</body>
</html>

参考链接

MDN Web Docs: pointer-events

遇到的问题及解决方法

问题：为什么设置了 pointer-events: none; 之后，元素的子元素也无法被点击？原因：当父元素的 pointer-events 设置为 none 时，其所有子元素也会继承这个属性，导致子元素也无法接收鼠标事件。 解决方法：可以通过设置子元素的 pointer-events 为 auto 来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决子元素无法点击问题</title>
    <style>
        .disabled-button {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
        }
        .disabled-button > span {
            pointer-events: auto;
        }
    </style>
</head>
<body>
    <button class="disabled-button">
        <span>禁用按钮</span>
    </button>
    <button>正常按钮</button>
</body>
</html>

通过这种方式，可以确保父元素被禁用点击的同时，子元素仍然可以正常接收鼠标事件。

页面内容是否对你有帮助？

有帮助

没帮助

如何禁用鼠标单击按钮操作事件？

java、swing、mouseevent、jbutton

有什么方法可以禁用鼠标点击吗？在面板中有不同的组件，对于一些Button click事件，我想禁用鼠标单击。我的意思是，点击鼠标对组件没有任何影响。我可以禁止使用setEnabled()函数，但我不想这样做。有什么方法可以禁用鼠标点击吗？

浏览 8提问于2013-04-04得票数 1

3回答

iPhone和iPad上的Safari在触摸上提供了颜色反馈，我想停止这种情况

iphone、ipad、webkit

点击一个具有Javascript处理程序的元素会使该元素有一个“灰色覆盖”。这通常很好，但我使用事件委托来处理许多子元素的触地事件。由于委托，“灰色覆盖”出现在父元素上，看起来很糟糕，令人困惑。我宁愿有一些webkit css属性，我可以重写它来关闭它。我已经在我的应用程序中有视觉反馈，所以‘灰色覆盖’是不需要的。有什么想法吗？

浏览 0提问于2010-05-29得票数 3

回答已采纳

1回答

在linux中停止鼠标与桌面的交互

linux、input、mouse

当按下鼠标左键进行一些实验时，我想从鼠标获取坐标输入，但它与桌面上的东西交互，使事情变得混乱。有没有办法阻止鼠标与物体的交互，比如禁止鼠标点击或类似的东西。

浏览 1提问于2012-08-22得票数 0

回答已采纳

1回答

处理透明的png文件符号

flash、actionscript-3、click、transparent

之后，我将鼠标点击事件应用于框架符号下面的符号，但当我运行游戏时，我不能单击下面的符号，而只能单击框架符号，尽管框架是透明的。问题是，虽然png图片有一些透明区域，但鼠标点击不能穿过它。有没有什么方法可以禁止单击某个符号，并且鼠标单击事件可以识别放置在它下面的符号？你能帮我一下吗？thx大量^0^

浏览 2提问于2011-10-05得票数 1

回答已采纳

2回答

禁止在MapControl uwp中滚动

uwp、uwp-xaml、uwp-maps

我正在玩UWP中的MapControl，我想禁止在水平滚动与鼠标左键点击的循环，我希望我的小工具像地图一样，而不是一个地球和地图旋转与右键点击，我已经在互联网上寻找，但找不到任何提示。

浏览 19提问于2018-01-19得票数 0

1回答

AS3: TextField似乎有一个看不见的背景填充？

actionscript-3、sprite、textfield

，当我在填充矩形的边缘上移动鼠标时，它跟踪"HIT!"；但当我在填充矩形的中心周围移动鼠标时，它没有跟踪任何东西。并提到我的鼠标在TextField的边界框中，TextField是否有不可见的背景填充？它能被移除吗？多么? 谢谢！:)

浏览 3提问于2012-07-15得票数 1

回答已采纳

5回答

jquery禁用在<object>上单击

jquery、click

我们可以禁止点击<object>标签吗？我正在使用嵌入代码将一个播放器附加到body。当播放器被点击时，它会把用户带到播放器页面，比如youtube。这干扰了我在播放器上的可拖动功能。只要拖动播放器并松开鼠标，链接就会执行。 <object><param></object>

浏览 2提问于2011-02-11得票数 2

回答已采纳

3回答

iPad禁止通过CSS点击链接

javascript、jquery、ios、ipad、safari

我有多个链接，其中有类“禁用”定义在CSS。如何仅通过CSS来处理此问题？我知道这可以通过JavaScript/jQuery来完成……但是有很多页面，我需要通过CSS来完成。

浏览 3提问于2013-06-06得票数 0

2回答

拦截鼠标/键盘事件

c#、windows、winforms、windows-7

我想要一种简单的方法来禁止人们使用我的计算机，而不必锁定它。基本上，我只是想启动一个应用程序，它拦截所有的键盘/鼠标事件，并禁止任何事情发生，使屏幕看起来“冻结”。但我可以解冻它，如果我检测到，例如鼠标右键按下4倍快。其他人不会知道这样做，但我会！这样我就可以保持我的系统(足够安全)，并且不会因为必须一直输入我的pw而感到烦恼。谢谢

浏览 2提问于2011-08-12得票数 3

回答已采纳

2回答

如何使事件不相互干扰

jquery

例如，在下面的代码中，当我将鼠标移到按钮上时，我希望按钮文本变为白色，当鼠标离开按钮时，按钮文本变为黑色。当我点击按钮时，我希望它变成蓝色。}); $(this).css$(document).on('click','#food-roulette, #kwik-pix, #crypto, #realtalk&#

浏览 0提问于2017-02-16得票数 1

1回答

我有一个phonejs项目，为web创建，使用html和js。我需要有一个包含项目建设计划/高建筑计划图像的页面。在该图像中有一些批次，批次1-20，例如，将有状态可用，售出，预订等。我想让用户可以在图像中标记相应批次的状态，可能由颜色区分，例如RED=SOLD，GREEN=AVAILABLE等，状态可以保存到数据库中。有没有人能建议我什么是实现这一目标的最佳方式/方法？在此之前非常感谢。HTML <div data-options="dxView : { name: 'status_tagging', title

浏览 2提问于2014-04-14得票数 0

1回答

使用pyautogui解锁屏幕

python-3.x、windows-10、pyautogui

我正在使用pyautogui在Windows10上解锁我的电脑屏幕。脚本如下：time.sleep(7)pyautogui.press('space')time.sleep(3)pyautogui.press('p')pyautogui.p

浏览 0提问于2018-07-04得票数 2

1回答

长按触摸屏时Angular <button>卡住

css、angular、typescript

如果你正常地触摸按钮，它可以正常工作，点击功能也会被执行，但如果你按住1-2秒，按钮就会卡住，不会执行该功能。我已经改变了css样式，当状态:active生效时，将按钮涂成黑色，结果是按钮保持黑色，直到你触摸屏幕上的其他地方。type="button" class="Button" (click)="onClick()" 和CS

浏览 1提问于2019-08-27得票数 0

1回答

如何防止手机中的默认事件

javascript、jquery、html、events、preventdefault

="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" /> <style type="text/css

浏览 0提问于2015-09-15得票数 0

2回答

由于“托管在网站上的AdSense广告上的无效活动”，Admob帐户暂停。

android、admob、adsense

我是android的新手，我已经阅读了admob的指南，然后在我的应用程序中添加了广告，一切都很好。三个月后，我上传了我的应用程序，赚了一点钱。但到目前为止，对于初学者和初学者来说还不错。我不明白他们所说的**无效活动是什

浏览 13提问于2015-09-10得票数 9

回答已采纳

1回答

jQuery的委托事件不能取消中间点击

javascript、jquery、html、dom-events、event-propagation

document).on('click',false) </script>其他代码仅使用jquery委托事件来取消对A元素的点击：<a href="http://exam

浏览 11提问于2015-12-31得票数 1

2回答

带有mouseenter和mouseleave事件菜单

javascript、jquery、mouseevent

我试图做一个菜单，但我有问题的鼠标/鼠标保存事件。").css('display', "block");}); 到目前为止，我试过这个。我的重点是点击“图标”，这个点击将显示一个菜单/另一个隐藏元素。现在我想把它打开，就像有人把鼠标放在“图标”或实际菜单上一样长。但是使用我提供的代码，一旦我离开我的鼠标，然后再次进入“图标”，它仍然保持onmouseenter事件，菜单将再次出

浏览 3提问于2012-12-08得票数 1

回答已采纳

1回答

防止用户使用后退按钮或控制它将进行的操作

javascript、html、flask

我正在编写一个应用程序，用户需要解码这个应用程序之前编码过的单词。用户只有120秒钟的时间来猜测尽可能多的单词。这是我的代码：def c_cesar(): if request.method=='GET': cesar_game(points+1, randint(points+1, 2*poin

浏览 3提问于2022-04-07得票数 0

1回答

单击eclipse中的文本时，键盘布局会自动更改

eclipse、layout、keyboard

问题是当我在eclipse中，用第二种布局语言(我的母语)输入一些东西时，我想放一些language.is标签，但是当我点击该文本时，我在windows中的布局语言自动更改为html，有什么方法可以禁止这种行为吗我希望当我按快捷键或用鼠标点击时，键盘布局改变，而不是通过点击文本(用该语言书写)

浏览 5提问于2013-07-08得票数 1

回答已采纳

1回答

Bootstrap :移动设备的首要导航问题

html、css、wordpress、twitter-bootstrap

我正在使用bootstrap与我的wordpress网站，它是完美的，当我们上传到现场服务器，但当我们悬停/点击导航项目在移动这是发生了什么现在，如果我点击任何导航项目，它没有被点击，底部的一个正好到上面的一个，现在我不记得我在做这个网站的时候是否修改了一些导航代码的css，但我希望一个css规则会让它很好，有人能帮我解决这个问题吗？

浏览 1提问于2015-11-12得票数 1

点击加载更多

css禁止鼠标点击