右键单击停止传播

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(使用前将#替换为@)

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

  • 将 OoXml 插入单词抛出错误:未知

    我一直在尝试通过office js将OOXML插入到word文档的正文内容中insertOoXML 方法 我什至尝试过最简单的实现 认为我在尝试替换 XML 本身中的 fieldCodes 时做了一些不正确的事情 所有结果都是这样Error
  • JavaScript onTouch 不工作

    谁能告诉我为什么这个 onTouch 处理程序没有触发 var myDiv document getElementById existingContent var myButton a href log out a myDiv append
  • 主干视图 DOM 元素已删除

    我一直在阅读有关 Backbone js 僵尸 或内存泄漏 问题的信息 基本上 当您不再需要该元素时 您必须从 DOM 中解除绑定并删除该元素 以确保所有事件也被删除 现在 我有一个包含几个容器的单页应用程序 div div div div
  • 关闭选项卡时要求确认[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 当我在某些浏览器上关闭页面时 我希望出现一个消息框 并询问我是否真的要关闭页面 有两个按钮 如果我单击No那么这个标签就不会被关闭 我怎样
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构

随机推荐

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

    在我的网站 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