onclick 相关问题

如何使用ontouchstart代替onclick

我正在使用下面的代码，它可以在桌面上运行，但点击功能在移动设备上不起作用，所以我尝试使用 ontouchstart 但这也不起作用。 我究竟做错了什么？ var 视频 = 做...

JS：func不是函数（onClick）

我有一个主文件，其中有一个函数： 从输入读取=（值）=> { 控制台.log(值) } 我还有一个附加文件，其中包含一个函数，可以让我渲染一些按钮： 出口...

如何在js中点击x次后禁用按钮？

我正在尝试使用Javascript在单击按钮x次后禁用该按钮。为了简单起见，现在假设 x = 2。我似乎无法让计数器增加。谢谢你的任何

如何从鼠标单击事件导出轴索引？

此 Python 3.11 脚本显示两个图表（轴）： 将 numpy 导入为 np，将 matplotlib.pyplot 导入为 plt def onclick(事件): 打印（事件.inaxes） 图，axs = plt.subplots（ncols = 2，nrows = 1，figsize =（3.5，...

如何将复制到剪贴板按钮分配给特定文本 HTML 和 JavaScript

我试图在我的网站上创建许多按钮来将相应的文本复制到剪贴板，但所有按钮似乎都在复制最后的文本。 我为每个文本使用了不同的 id 属性......

如何防止点击时嵌套 React 组件中的事件冒泡？

这是一个基本组件。 和 都有 onClick 函数。我只想触发 上的 onClick，而不是 。我怎样才能实现这个目标？ 我玩过 这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？ 我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案 如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。 只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！ 另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。 如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。 例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。 例如，您可以检查 if (target.localName === "input") { return}。 所以，这是一种“避免”处理程序执行的方法 解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。 （您的 < li > 标签） 每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。 比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案 您可以验证点击的元素是否是预期的元素。 例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }

将匿名函数附加到链接的“onclick”属性

在网站的各个页面上，我通过 JavaScript 生成不同的点击处理程序，附加到特定页面元素的 innerHTML 中的链接。我用这样的实用函数来做到这一点： 功能

扩展图标单击事件不起作用清单版本 3

我想在用户单击任何选项卡上的我的扩展图标时监听该事件。我做了一些研究，但发现很多操作都被贬值了，我只能找到这个方法

如何使用 onclick() javascript 获取目标元素

我试图使用 onclick() 函数获取目标元素，只是注意到使用 e.target 是不可能的，尽管可以使用已弃用的 event.target （仍然给出结果）。那个...

使用 onclick 单击子元素时，Intersection Observer 的关键帧动画会意外运行

我希望 css 关键帧动画在桥元素位于视口中时运行 1 次。相交观察器做得很好，但问题是单击其他部分时动画会随机触发......

在 jQuery 中通过 onclick 属性选择元素

我有这个标记： 我的问题：如何选择第二个链接

鼠标单击时从 folium 地图返回纬度、经度值到 python 脚本（streamlit webapp）

我正在编写一个Web应用程序，用户将在其中单击地图，纬度、经度将返回到Python脚本。网络应用程序是在streamlit上编写的，对于地图我使用folium。

onClick 在旧版本的 IOS 上不起作用

我有这个代码来显示一副牌。它在 Windows、Android 和大多数较新的 IOS 设备上运行得非常好。由于某种原因，卡片上的 onClick() 在某些较旧的 IOS 上不起作用...

如何监听上下文菜单项上的事件？

我正在尝试监听浏览器默认上下文菜单（不是自定义上下文菜单）上的“在新选项卡中打开链接”上下文菜单项的单击。我想在之前做一些 javascript

我需要将代码插入到 Elementor Pro 按钮中，以在单击时更改其背景颜色

我有13个对齐的按钮，当用户选择其中一个时，它必须改变其背景颜色，并且当用户从单击事件显示的表单返回时保持不变，所以必须相同...

react-pdf PDFDownloadLink onClick 事件问题 - “检查互联网连接”错误

我正在使用react-pdf库并尝试将自定义onClick事件处理程序添加到PDFDownloadLink组件。目标是当用户点击

我的 RPS 游戏无法通过 onClick 按钮显示玩剪刀石头布（MK版）

玩剪刀石头布（MK版） <!DOCTYPE html> <html> <head> <title>Play Rock Paper Scissors (MK Edition)</title> </head> <body> <button onclick="Play Rock Paper Scissors(MK Edition)">Play Rock Paper Scissors (MK Edition)</button> <script> function Play Rock Paper Scissors(MK Edition) { // Get the path to the Python script. var pythonScriptPath = "path/to/python/script.py"; // Run the Python script. subprocess.run(["python", pythonScriptPath]); } 当我尝试单击播放按钮时启动剪刀石头布游戏时，我的代码中收到两个语法错误。 我仍在尝试修改它并查找任何语法错误等，但我不确定是否是这样。我看到的错误消息说“未捕获的语法错误：缺少（在形式参数之前”和“未捕获的语法错误：意外的标记：标识符”。我的期望是当用户单击“玩石头剪刀布”按钮时，石头剪刀布游戏提示将会弹出这样你就可以玩了。 乍一看，您的 Javascript 函数名称似乎存在语法错误。函数名称中不能有空格，并且应为参数声明保留括号。您可以像这样应用这些更改： <!DOCTYPE html> <html> <head> <title>Play Rock Paper Scissors (MK Edition)</title> </head> <body> <button onclick="playRockPaperScissors()">Play Rock Paper Scissors (MK Edition)</button> <script> function playRockPaperScissors() { // Get the path to the Python script. var pythonScriptPath = "path/to/python/script.py"; // Run the Python script. subprocess.run(["python", pythonScriptPath]); } </script> </body> </html> 按钮的 onClick 属性现在调用 playRockPaperScissors() 函数。

onclick='' 在尝试 Chrome 扩展程序时不起作用

我正在尝试制作一个 Chrome 扩展程序，但是 onclick='' 在使用时不起作用，因为下面的内联 JavaScript 是我使用的代码： 让 createTasks = () => { TaskContainer.innerHTML = `<...

为什么我的CSS代码中的will-change不起作用？

在css文件中的第1161-1176行和1190-1206行以及js文件中的第58-67行，当我单击搜索徽标时没有任何反应。 然而，我希望当您点击时搜索栏会像视频一样显示...

我无法使用 html 和 js 为我的元素设置动画

我试图让我的输入标签在单击后向上移动，其工作方式是在单击输入后，将包含我想要的动画的类分配给标签，但它不起作用...