右键单击停止传播

2023-12-06

如何停止 javascript 中右键单击事件的传播,以便父元素根本检测不到它们? 当我单击以下 html 中的链接时,未检测到左键单击,但文档元素将右键单击检测为“单击”事件而不是“contextmenu”事件。我尝试将事件侦听器附加到 mousedown、上下文菜单,但没有成功。

[编辑] 将代码更改为 contextmenu 适用于 chrome,但不适用于 Firefox (v23.0.1),这可能是 Firefox 的错误。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript;version=1.8">

function log(s){
    document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
    document.addEventListener('click',function(e){
        log('click detected');
    },false);

    let link=document.querySelector('a#link');
    //click only cares about left clicks
    link.addEventListener('click',function(e){
        e.stopPropagation();
        return false;
    },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>

“右键单击”事件称为“contextmenu”事件。

http://www.quirksmode.org/dom/events/contextmenu.html


Example:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>

function log(s){
        document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
        document.addEventListener('click',function(e){
                log('click detected');
        },false);

        document.addEventListener('contextmenu', function(e){
                log('right-click detected');
        }, false);

        var link=document.querySelector('a#link');

        link.addEventListener('click',function(e){
                e.stopPropagation();
                return false;
        },false);

        link.addEventListener('contextmenu',function(e){
                e.stopPropagation();
                return false;
        },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

右键单击停止传播 的相关文章

  • 在长时间 Ajax 调用期间显示进度

    我有一个简单的网站 http www kousenit com twitterfollowervalue http www kousenit com twitterfollowervalue 根据一个人的 Twitter 关注者计算数量 由
  • crypto-js 中的 AES 解密返回空字符串

    我正在尝试将加密数据存储在 localStorage 中 并在需要时使用 crypto js 对其进行解密 这是加密函数 const passphrase CryptoJS enc Utf8 parse key const iv Crypt
  • 使用 jQuery 的 .trigger('dragstart') 实现 HTML5 的拖放功能时如何 .setData/.getData

    当使用 jQuery 的 trigger dragstart 在具有 ondragstart drag event 属性的元素上触发函数时 如何使用 setData getData 实现 HTML5 在触摸设备上的拖放 流程示例 用户通过
  • 发送电子邮件的 Google Apps 脚本语法错误。无法识别我的问题

    我正在尝试让 Google 工作表从工作簿中另一张工作表的长列表中发送个性化电子邮件 我使用了教程 因为我是所有编码语言的认证新手 但 AppScript 告诉我第 4 行有语法错误 我一生都无法弄清楚我做错了什么 但我确信当由具有这些合法
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • Protractor - 等待多个元素

    我正在尝试等待页面上的多个元素 我不知道可能有多少个 但至少会有一个 我知道使用以下命令等待单个元素 效果很好 var EC protractor ExpectedConditions browser wait EC presenceOf
  • AngularJS Youtube 播放器嵌入非常大的播放列表

    我目前正在构建一个 AngularJS 应用程序 我知道它有点过时 但我对它很有信心 我的应用程序需要嵌入一个 YouTube 播放器 其中包含一个非常大的播放列表 大约 1500 个项目 但我无法对其进行编码 以便它实际上可以嵌入超过 2
  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js
  • 是否有 IE 渲染完成事件?

    在尝试确定页面加载时间为 20 秒的原因时 我发现 IE8 中有一些奇怪的行为 场景是这样的 我进行 ajax 调用 它返回并且回调看起来像这样 StoreDetailsContainer html tableHtml var StoreD
  • 适用于 HTML5 混合应用程序的 CORS

    我读过很多关于 CORS 的文章 以及允许 Access Control Allow Origin 如何成为 Web 服务器的安全漏洞 但没有一篇文章解释了如何允许 HTML5 混合应用程序访问某些不允许使用通配符 的域上托管的 Web 服
  • Discord.js v12:如何等待 DM 通道中的消息?

    这是我尝试过的代码 message author dmChannel awaitMessages msg gt console log msg content 但它返回此错误消息 TypeError Cannot read property
  • 为什么 "asdf".replace(/.*/g, "x") == "xx" ?

    我偶然发现了一个令人惊讶的 对我来说 事实 console log asdf replace g x Why two替代品 似乎任何没有换行符的非空字符串都会产生此模式的两个替换 使用替换函数 我可以看到第一个替换是整个字符串 第二个替换是
  • Node.js 连接 createServer 代码

    我正在阅读 Node js Connect 版本 2 15 0 Create a new connect server return Function api public function createServer function ap
  • 每次页面重新加载时都会出现新的 Google 登录库提示

    在我的项目中 我使用常规弹出客户端 JS 身份验证 平台客户端 https developers google com identity sign in web sign in 我从旧版 Google Sign 迁移到新版 Google I
  • 使用js获取选择选项的onclick事件

    我有一个非常令人沮丧的问题 我有这个代码 它过滤掉我的结果并将它们输入到选择框中 var syn
  • 如何将字符串转换为 Javascript 中可执行的代码行?

    我有以下代码 console log I am var x console log Alive 现在我只想使用x执行分配给它的代码字符串 例如 我什至可能不知道 x 的值 但只是想执行它 这可能吗 eval https developer
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • jQuery可排序发布数据,但没有数据

    谁能告诉我我在这里缺少什么 我的数据似乎总是空的 我做错了什么 document ready function nav sortable connectWith nav axis y update function event ui var
  • 如何在不刷新页面的情况下更新页面 html 和 url

    我想知道是否有人可以指出我学习如何在不刷新页面的情况下更新页面 html 和 url 的方向 是否有任何现有的 javascript 库可以处理这个问题 或者有一本涵盖此类事情的好书 这是使用该效果的示例网站 http onedesignc
  • 如何在jsp页面中包含javascript

    我是 J2EE 和 Web 开发的新手 这是我的问题 我想在网页中包含 angular js 这是有效的版本 但我也想要一些本地的 javascript 文件 并且希望我想在本地目录中导入 angularjs

随机推荐

  • 为什么我的自定义字体在某些浏览器中存在位置偏移?

    在我的网站 www monkey touch com 上工作时 我开始在标题和其他几个地方使用自定义字体 它看起来很棒 并且由于 font squirrel 它可以在所有浏览器上运行 然而 我后来意识到字体在某些浏览器中的呈现方式有所不同
  • 应用程序小部件中的 AdapterViewFlipper:setPendingIntentTemplate() 和 setOnClickFillInIntent() 不起作用

    我正在将应用程序小部件中的 ListView 更改为 AdapterViewFlipper 问题是 我需要处理对某个项目的点击 它可以完美地使用 setPendingIntentTemplate 将待处理的意图模板设置为整个 ListVie
  • 将 UIImageView 转换为 UIImage

    我正在处理图像 我有大量图像 并且我正在从服务器实时下载它们 然后使用AsyncImageView类 但知道我正在使用自定义类 这需要UIImage代替UIImageView 问题 有什么好的方法可以转换吗UIImageView to UI
  • 按下后退按钮时完成所有活动

    我有一个 Android 应用程序 有 3 个活动 对于第一个和第二个活动 我希望后退按钮退出所有现有活动 此时后退按钮正在退出它启动的活动 但如果在第二个活动上按下后退按钮 则将显示第一个活动 而不是退出应用程序 因为第一个活动会导致第二
  • Cloud Firestore 相当于实时数据库“.info/connected”参考吗?

    我已开始从 Firebase 实时数据库迁移到 Cloud Firestore 我需要一种方法 让应用程序在 Firestore 的连接状态发生变化时 从在线到离线 反之亦然 收到警报 为了清楚起见 我不需要将其写入数据库以供应用程序的其他
  • 与其他人分享来自 mpldatacursor 的图像

    我正在使用这个例子当鼠标悬停在数据上时如何显示数据标签制作当您将鼠标悬停在点上时会出现数据的图像 这确实很好用 但是有什么方法可以保存它以便我可以将图像发送给其他人吗 我不确定哪些格式支持 工具提示 但 pdf 和 svg 都支持 也许还有
  • Sql Server 2005 全文搜索中的干扰词

    我正在尝试对数据库中的一系列名称进行全文搜索 这是我第一次尝试使用全文搜索 目前 我输入输入的搜索字符串 并在每个术语之间放置一个 NEAR 条件 即输入的短语 Kings of Leon 变为 Kings NEAR of NEAR Leo
  • Lotus Notes XPage 用于设计,Oracle(或其他 RDBMS)用于数据

    我计划使用 XPage 进行设计 加上 Lotus Notes Elements 来制作一个 Web 应用程序 但我不会将数据存储在 Lotus Notes 中 而是将数据存储在 RDBMS 特别是 Oracle 数据库 中 正如您所看到的
  • 如何在 Python 中检查文件大小?

    如何在Python中获取文件的大小 Use os path getsize gt gt gt import os gt gt gt os path getsize path to file mp3 2071611 输出以字节为单位
  • 我需要在添加新组件时动态调整 JPanel 的大小

    我需要让用户向我的 JFrame 添加更多文本字段 因此一旦框架的大小超过其原始值 滚动窗格就会介入 由于我无法将 JScrollPane 添加到 JFrame 以启用滚动 所以我决定将 JPanel 放在JFrame 并将 JPanel
  • Docker 身份验证:无法获取匿名令牌

    我的 gitlab 运行程序中出现以下错误 错误 授权失败 无法获取匿名令牌 获取 https auth ipv6 docker com token scope repository 3Alibrary 2Fnode 3Apull serv
  • std::async 和对象复制

    我正在尝试std async最终得到如下代码 class obj public int val obj int a val a cout lt lt new obj lt lt endl obj cout lt lt delete obj
  • XPath 中求和与积的聚合函数

    类似于这个问题 http stackoverflow com q 1333558 948404 我想使用XPath来计算结构中产品的总和 如下所示
  • 如何使R中的五大湖与海洋颜色相同?

    我刚开始使用 R 制作地图 我正在尝试制作北美地图 以美国为中心 并希望五大湖的颜色与海洋的颜色相同 我当前的代码默认使它们与国家 州具有相同的颜色 关于如何改变它们的颜色有什么想法吗 也许是不同的底图 当前代码 library cowpl
  • 对列表视图中的项目使用 setOnItemClickListener

    我有一个可以将音频保存在 SD 卡上的应用程序 我创建了一个列表视图 用于从 SD 卡检索文件名 我正在尝试设置一个侦听器 以便在单击文件名时我可以启动另一个播放该文件的意图 当我尝试设置监听器并传入一个新的OnItemClickListe
  • 背包C#实现任务

    我正在尝试在给定条件下编写背包 C 算法 但我总是遇到两个问题 我收到 索引超出数组范围 错误 或者我的结果仅为 0 我找到了几个 Knapsack 实现的代码示例 但无法弄清楚我做错了什么 代码示例 https www programmi
  • JS 库最佳实践:返回未定义或在错误的函数输入时抛出错误?

    当用 JavaScript 编写库时 处理函数无效输入的最标准 最友好 的方法是什么 我的直觉告诉我 返回 undefined 是完全可以的 但是抛出错误实际上更有帮助吗 还是真的不重要 我还可以看到返回 false null 甚至 1 但
  • 无法在 Windows 上使用 Android Studio 1.3.2 调试 NDK 示例

    我有Android Studio 1 3 2 NDK r10e gradle实验插件0 2 0 我已经克隆了ndk 样本仓库并仔细遵循以下说明NDK 预览 包括创建本机配置 当我选择 LLDB 作为调试器并调试 Teapot NDK 示例应
  • 在 webview 控件中显示本地 PDF 文件 - 显示空白 Pdf 文件

    我正在研究 Xamarin Forms UWP 我想在webview控件中显示本地PDF文件 我点击了这两个链接 https developer xamarin com recipes cross platform xamarin form
  • 右键单击停止传播

    如何停止 javascript 中右键单击事件的传播 以便父元素根本检测不到它们 当我单击以下 html 中的链接时 未检测到左键单击 但文档元素将右键单击检测为 单击 事件而不是 contextmenu 事件 我尝试将事件侦听器附加到 m