如何在自己的单击监听器中阻塞内联onclick事件并在稍后调用它？
在自己的单击监听器中阻塞内联onclick事件并在稍后调用它的方法是通过以下步骤实现的：
- 首先，我们需要为目标元素添加一个单击事件监听器。可以使用JavaScript的addEventListener方法来实现，例如：
document.getElementById("targetElement").addEventListener("click", myClickListener);这里的"targetElement"是目标元素的ID，"myClickListener"是自定义的单击事件监听器函数。
- 在自定义的单击事件监听器函数中，我们可以阻止内联onclick事件的执行。可以使用JavaScript的preventDefault方法来实现，例如：
function myClickListener(event) {
event.preventDefault();
// 在这里执行其他逻辑
}这里的event参数是事件对象，通过调用preventDefault方法可以阻止默认的事件行为，即阻止内联onclick事件的执行。
- 在稍后的某个时刻，我们可以手动触发目标元素的点击事件。可以使用JavaScript的dispatchEvent方法来实现，例如：
document.getElementById("targetElement").dispatchEvent(new Event("click"));这里的"targetElement"是目标元素的ID，通过创建一个新的Event对象并将其传递给dispatchEvent方法，可以手动触发目标元素的点击事件。
通过以上步骤，我们可以在自己的单击监听器中阻塞内联onclick事件并在稍后调用它。这种方法适用于需要在特定条件下延迟执行内联onclick事件的场景，例如需要等待异步操作完成后再执行点击事件。
相关·内容
我正在使用puppeteer来收听点击事件。我还想知道被点击的html元素的id。我如何做到这一点呢？我现在的代码如下： const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
let browser = await puppeteer.launch({ headless: false });
let page = await browser.newPage();
// Expose a handler to the page
await pa
浏览 120提问于2020-10-12得票数 1
这个页面的想法是从我的java应用程序中加载“技能”，并动态创建一个Delete按钮，允许我从应用程序中删除这些“技能”。
试图单击按钮删除技能时收到的错误。
manageTech:1未定义的ReferenceError: deleteMe未在HTMLButtonElement.onclick中定义(manageTech:1)
js文件：
$( document ).ready( () => {
var url = window.location;
// GET REQUEST
$("#btnGetFiles").click( (eve
浏览 1提问于2019-05-23得票数 1
回答已采纳
我有一些包含文本的可点击div。在某些情况下，文本本身就是一个超链接。 我希望通常能够单击div并让它触发onclick操作，但是当直接单击超链接时，我只希望触发超链接操作，而不是div onclick操作。 下面的示例代码说明了这个问题-当单击超链接时，div会变成红色(onclick)，google会在一个新的选项卡中打开。在这种情况下，我只想在一个新的标签中打开谷歌。当单击div上的其他位置时，颜色应变为红色。 提前谢谢你， 丹尼斯 <div id="myDiv" style="height:60px;width:200px;border:solid
浏览 28提问于2021-01-02得票数 3
回答已采纳
我正在制作一个手动图片库/幻灯片，在那里按下指针将把你带到下一个/上一个图像。我已经使用'Button‘元素创建了指针。现在，我只希望用户能够使用左/右箭头键。 为了让'button‘元素起作用，我使用了javascript。 <button class="left" onclick="plusDivs(-1)">❮</button>
<button class="right" onclick="plusDivs(+1)">❯<
浏览 35提问于2019-06-29得票数 1
1回答
我在HTML/EJS页面上附加了一个外部脚本。该脚本使用“createElement”和“setAttribute”命令将图像填充到页面。此外，我还创建了一个'onclick‘属性，以便在其中一个创建的图像被“单击”时运行一个函数。外部“.js”文件的代码类似于以下内容：
addEventListener("load", initialize);
const vitals = document.querySelector('#passed');
const _convert = vitals.dataset.pix.split(","
浏览 1提问于2020-12-08得票数 1
回答已采纳
更好：<a href="/test" onclick="T.actions.addFriend(profileId)">add friend</a>
或
<a href="/test" class="add-friend-button">add friend</a>
然后使用Javascript选择" add -friend-button“类并添加一个单击事件？
浏览 0提问于2010-04-28得票数 2
回答已采纳
假设我有一些这样的代码：
let myFunc = () => {
console.log("hello");
}
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
为什么点击文档只有一次控制
浏览 1提问于2020-09-17得票数 2
1回答
使用jQuery，我想向搜索按钮添加一个单击事件，该事件在HTML中已经绑定到该按钮的事件之后发生(另一个单击事件是在标记的onclick事件中，它不是由javascript添加的)。
我尝试过使用.click(function() {...});，但该事件将在按钮上已有的内联onclick事件之前触发。在第一个单击事件完成后，如何运行单击事件？
浏览 0提问于2011-09-02得票数 0
回答已采纳
1回答
我想知道是否有可能链上重叠的onClick事件，而不把任何东西传递给孩子。
我知道我可以把东西传递到树下，只有一个函数，但我只是在实验
<div onClick={()=> foo("a")} >
<div onClick={()=> foo("b")} />
</div>
我想要的是在侦听器函数中一起接收这两个事件，如下所示：
listener = (events) => {
console.log(events) // something like [[Event("a"),
浏览 2提问于2022-07-12得票数 0
我有一个表，它使用onclick处理整行的鼠标点击。问题是这些行还包含不应该激活onclick事件的复选框。单击行应该会引发事件，但选中复选框则不会。
我找到了很多关于这个问题的答案，但我一直无法让它工作。我使用的是简单的html/css/js，没有像jQuery这样的东西。
答案似乎是由于事件传播和许多答案说使用stopPropagation()。但Chrome表示，该函数未为该事件定义。
这是我的测试示例。
单击表将显示一个" table !“警报。我不希望单击表中的复选框导致此警报。
function clickTable(e) {
alert('ta
浏览 4提问于2021-03-15得票数 2
我被要求构建代码，在这里我可以拦截按钮的点击，停止在单击中触发的函数，运行分析脚本，然后启动原始的单击函数。当使用onClick时，我可以在标准按钮上使用JS/jQuery来实现这一点，但是这个按钮是按角度构建的，使用的是ng单击，所以我有点脱离了元素。
我要拦截的按钮是：
<input id="btn-hero-form-try" class="btn btn-solid" data-ng-disabled="trialForm.buttonDisabled" data-ng-click="trialForm.submitTria
浏览 1提问于2015-11-04得票数 0
回答已采纳
在回答以下SO问题时：，我顺便说了一句，使用inline- JavaScript /早期绑定来绑定JavaScript事件“经常被误导”。
例如：
<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />
我主张使用“后期绑定”方法，即在标记中没有引用JavaScript，我认为这是最佳实践。然而，评论者断言，有必要使用它的场合，我想知道这些可能是什么。
在不讨论这两种方法的相对优点的情况下，任何人都能想到要求您使用(例如
浏览 2提问于2011-06-13得票数 3
回答已采纳
3回答
我正在使用javascript动态创建一个按钮，我在其中设置所有属性并将其显示在页面上。然后使用jQuery实现悬停和单击逻辑，以更改按钮类的布局。当创建按钮时，它的类布局是它应该是的，但是当悬停或单击时，它不会像我在运行前创建它时那样发生变化。
javascipt代码：
function createbutton()
{
var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("class",
浏览 4提问于2012-04-03得票数 1
回答已采纳
这是“myPlugin.js”的内容：
(function ($) {
$.fn.MyPlugin = function (options) {
// retrieve somespan
somespan.html("<a href="#" onclick="javascript: SelectLink(this);"></a>");
})(jQuery);
function SelectLink(element) {
console.log(element);
if (eleme
浏览 2提问于2015-05-06得票数 0
回答已采纳
HTML代码：
<div id="txtAge">
<table>
<tr>
<td><input type="checkbox" onclick="checking()" id="ch1" value="1"><td>
<td><input type="checkbox" onclick="checking()" id="ch2" value=&
浏览 1提问于2015-12-17得票数 0
回答已采纳
以下是代码，我正在尝试接收来自重叠的图像视图的反馈。其中一个图像视图返回isPressed方法true，但另一个返回false。它们是重叠的，所以当我单击其中一个时，我猜它们的isPressed方法都应该是真的。我哪里错了？ public class MainActivity extends AppCompatActivity {
private final String TAG = this.getClass().getSimpleName();
ImageView[] imageViews;
Button button;
int a = 0;
@Override
浏览 18提问于2020-01-10得票数 1
回答已采纳
1回答
主题是一个问题。举个例子，我有这个html
<a href="/en/pages/socials.aspx">Learn more</a>
它不起作用。好吧，也许有一些看不见的元素不允许点击它。这里我添加了onclick属性：
<a href="/ru/pages/socials.aspx" onclick="javascript:alert('Hi');">Learn more</a>
但是现在我看到出现了"Hi“消息(所以<a>标签是可点击的)，但它不会改变当
浏览 0提问于2014-10-02得票数 1
我一直在努力学习反应的基础知识。但是，我在本教程中遇到了一个部分，要求我将一个alert()放在onClick事件的内部，如下所示：
<button className="square" onClick={() => {alert("click");}}>
{this.state.value}
</button>
我不明白为什么需要箭头函数--为什么不能单独使用警告()呢？
文档声明：
忘记() =>和编写onClick={onClick=(‘单击’)}是一个常见的错误
浏览 0提问于2019-08-07得票数 16
回答已采纳
我正在尝试实现一个奇特的Yes No confirm，但我在让回调按需工作时遇到了问题。下面的示例使用的是。
以下代码的问题在于，当单击HREF“测试”时，函数"do_something“被调用，而当用户单击”#fancyConfirm_ok“时，该函数不被调用。
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margi
浏览 0提问于2012-05-04得票数 3
回答已采纳
1回答
我想测试一个场景，在单击标签时调用输入组件(收音机/复选框)单击事件。以下是我的代码，
Toggle.jsx
import * as React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
import styled from 'styled-components'; // eslint-disable-line import/no-extraneous-dependencies
import Label from '../Label/Label'
浏览 3提问于2017-12-15得票数 3
如何停止要调用的父绑定？
示例：
<div id="test">
<a href="#" id="link" onclick="alert('testing')">TEST</a>
</div>
$('#test').on('click',function(){
alert('I dont want it to fire it up!');
})
我只想在#链接中触发onclick，而不是在
浏览 0提问于2012-05-09得票数 0
回答已采纳
如何避免绝对定位为触发父单击处理程序的子元素？ 如果我单击div，就会触发clickMe()。 <div onclick="clickMe()" style="height: 1600px; background: blue;">
<div> Test </div>
</div>
function clickMe() {
console.log("CLICK ME CLICKED")
} 在div上使用点击处理程序来停止传播是唯一防止它的方法吗？ <di
浏览 28提问于2020-12-08得票数 0
2回答
注意:我不知道jQuery，所以请不要给我一个如何使用jQuery来做它的回答。
我有多个div。我想知道如何访问它，并在使用JavaScript单击时更改它的特定颜色。
我并不是在寻找像document.getElementsByTagName("div")[0]这样的解决方案，因为它需要为每个div输入一个独立的数字。
我希望有一个简单的解决方案，有点像这样。
<div onClick="change();"><h1>Hi</h1><div>
<div onClick="change();"
浏览 2提问于2013-09-08得票数 1
回答已采纳
2回答
在我创建的应用程序中，我得到了很多内存泄漏。我创建了一个非常简单的应用程序来重现这个问题。这个应用程序只是引用了FirebaseDatabase并设置了一个ChildEventListener。当用户单击按钮时，它会向数据库添加一条记录，并启动一个执行System.gc()的新活动。
多次按下按钮将导致泄漏金丝雀产生转储。
MainActivity.java：
public class MainActivity extends AppCompatActivity {
private FirebaseDatabase firebaseDatabase;
private DatabaseRefe
浏览 5提问于2016-08-10得票数 1
回答已采纳
我有一个父活动(NavigationActivity)，它有一个包含四个片段(frag1、frag2、frag3、frag4)的viewPager。
然后frag2有一个包含3个片段的nestedViewPager (nestedFrag1、nestedFrag2、nestedFrag3)。
nestedFrag1有一个重定向视图，它用图像加载卡片，而图像有一个onCLickListerner。
@Override
public void onBindViewHolder(final ViewHolder viewHolder, int i) {
Poi_MDL poi = poiIt
浏览 2提问于2015-09-23得票数 0
回答已采纳
在Java语言中设置ImageView的可见性时，只显示结果，而不显示视图的中间状态。结果很好，但是在开始和结束之间，进度条是不可见的。 我已经尝试在UI-thread上运行代码(可以在代码中看到)。这不会改变任何事情。 重新连接是一个ImageButton，当单击它时，它将隐藏ImageView ConnectionStatus，显示名为Connecting的ProgressBar，睡眠1s，然后再次隐藏Progressbard /显示ImageView。 Reconnect.setOnClickListener(new View.OnClickListener() {
@
浏览 20提问于2019-04-09得票数 1
回答已采纳
今天我在编写一些演示代码时注意到了这种奇怪的行为，我很好奇发生了什么。"Button“不起作用，尽管"Button 2”是用不同的方式设置的。我知道这与报价有关，但我很好奇为什么会发生这种情况。类似地，如果我在引号中将一个函数传递给按钮3，而将它直接附加到按钮4中，那么按钮4可以工作，但是按钮3不能。
另外，我认为，考虑到按钮2的工作原理，它将立即对console.log("test")进行评估(类似于它在没有引号的情况下的工作方式)，而是会延迟到实际单击按钮。我知道这不是最好的方法，但出于好奇，我很好奇这里到底发生了什么。
document.getElem
浏览 0提问于2019-07-29得票数 1
回答已采纳
试图修改现有程序。
当一个按钮被单击时，它会调用一个OnClick方法，该方法调用如下内容：
document.forms.submit()
我想只使用相同的代码，但添加：
document.getElementById("overlay").style.display = 'block';
这将从本质上揭开带有加载覆盖的页面覆盖。
有没有什么地方可以做到这一点，只是将它添加到处理中？
浏览 0提问于2018-01-11得票数 0
1回答
到目前为止，我认为我已经很好地掌握了变量范围以及何时需要闭包。然而，这个极其简单的例子使我感到困惑。
<head>
<script type="text/javascript">
function doit() {
var text = 'Clicked (1)';
document.getElementById('clickable').onclick = function(evt) {
this.innerHTML
浏览 2提问于2014-01-18得票数 0
回答已采纳
1回答
我想根据P_Gamestate属性显示/隐藏JSX的一部分。如果这正在进行中，我们将只显示我们单击的组件。否则其他一切都应该被隐藏起来。这很困难，因为.map()引用了播放列表中的所有元素。我怎样才能做到这一点？目前，它将隐藏我单击的组件，但其他所有内容都将保持显示。
challenges.js：
export default function Challenges()
{
const [P_gameState, P_setGameState] = useState(GAME_STATE.BEFORE);
useEffect(() => {
async
浏览 2提问于2020-04-12得票数 0
4回答
我在单击Cancel按钮时调用两个函数，一个是Java，另一个是Jquery函数。
java脚本函数在Jquery函数之前执行，我想要的正好相反。
这是我的HTML代码
<button type="button" class="noWarning" id="cancelButton"
onclick="javascript: showMessage('cancelButton', 'Cancelling...'); disableButtons(); submitForm('${ca
浏览 15提问于2011-06-07得票数 2
回答已采纳
我有一个有联系详细信息的行表，每行都有一个call按钮，单击该按钮时应该会调用客户。
我使用的是onclick在外部js文件中定义的函数(我不知道最佳实践，而且可能是由于外部范围，但我也传递电话号码)。
我得到了错误，未定义函数
<table>
<th>
<td>#</td>
<td>Name</td>
<td>City</td>
<td>Phone Number</td>
<td>Call</td>
</th>
&l
浏览 1提问于2022-06-17得票数 1
回答已采纳
1回答
我正在尝试创建一个具有事件侦听器的TypeScript React组件。但是，当我这样做时，我会收到以下错误消息：
TS2345:类型‘(事件: React.MouseEvent) => void’的参数不能分配给'EventListenerOrEventListenerObject‘类型的参数。
我是不是漏掉了某种类型的支票？谢谢。您可以看到下面的组件代码。
sampleComponent.tsx:
import * as React from 'react';
interface MyState {
onClick: boolean;
浏览 4提问于2019-08-15得票数 10
我有一个表，其中一些行上有类。所有行都有链接，当我单击实际的行时，我想执行一个函数，但要阻止所有链接被传播。
在我的函数上使用e.stopPropagation()是可行的，但是其中一个链接有一个onclick函数和href=javascript:void(0);，所以它只是绕过了我的e.stopPropagation语句，继续运行单击行函数的过程。
下面是我的代码：
$('[class*=tooltip-properties]').click(function() { // this is the table row
// do stuff
});
$('[c
浏览 5提问于2013-04-29得票数 0
2回答
对于我的生活，我无法弄清楚到底是怎么回事，但由于某种原因，当“点击我”被点击时，数字就会像你预期的那样增加。当子组件触发单击时，它会重置状态并始终打印0。
function Child(props: {
onClick?: (id: string) => void,
}) {
const ref = useCallback((ref) => {
ref.innerHTML = 'This Doesnt';
ref.addEventListener('click',() => {
浏览 5提问于2019-09-18得票数 1
回答已采纳
我正在制作一个非常简单的"lightbox“，它弹出一个对话框，背景变暗。
我的问题是，我希望当用户单击变暗的背景时覆盖消失，而不是当他们单击对话框区域时。
到目前为止，我的方法是：
我在包装器中添加了一个带有"display:none;“的类，这样如果单击它，它就会消失。当然，如果您在#对话框中单击，则覆盖也会消失。有没有办法告诉它在dialogBox区域返回单击false？或者是一种更好的方法来解决这个问题？
<div id="overlay" onclick="$(this).addClass('displayNone');&
浏览 1提问于2013-07-19得票数 1
5回答
如何动态替换onClick事件？
、、、、
我有以下几页：
<body>
<a href="#" id=key onclick="func(0)">foo</a>
</body>
</html>
<script type="text/javascript">
function func(k){
alert(k);
$('#key').click(function() {func(++k)});
}
</script>
我对此代码执行的期望如下：
我单击链接并看到0，
浏览 3提问于2014-10-19得票数 0
回答已采纳
是否可以访问React中主组件中的子组件属性？
例如，我正在尝试这样做:我有一个主组件MyComponent和一个呈现按钮的SubComp子组件。是否可以将MyComponent的状态设置为单击的SubComp的tex属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.b
浏览 2提问于2020-12-22得票数 1
回答已采纳
4回答
我有个链接
<a id="special_link" href="" onclick="" >Link</a>
是否可以在onclick部分中使用Jquery并将某些内容应用于当前元素？
类似于：
$("#special_link").html('test');
最新情况：
我想在单击之后更改内容，我希望使用$this，这样我就不依赖于id了
浏览 4提问于2011-02-21得票数 0
回答已采纳
2回答
RecyclerView的适配器
public class SongsAdapter extends RecyclerView.Adapter<SongsAdapter.MyViewHolder>{
Context context;
ArrayList<HashMap<String, String>> songList;
public SongsAdapter(ArrayList<HashMap<String, String>> songList,Context context) {
this
浏览 17提问于2017-08-18得票数 0
回答已采纳
当单击表中的div时，直到单击冒泡到tr之后，停止传播才会触发。如何停止从div中冒泡？
决定了我的问题
→已单击！div tr已单击！div停止已触发
我需要
→被点击！div停止被触发
下面的html代码
<table>
<tr onclick="$('#INFO').append('tr clicked!<BR>');">
<td>
<div onclick="$('#INFO').append('div c
浏览 0提问于2013-03-23得票数 2
回答已采纳
我目前正在使用与自定义打印机一起进行生成结果，即：
import webpack from 'webpack'
webpack({ /* webpack config */ }, printStats)
function printStats(err, stats) {
// my custom printing of build results
}
现在我想切换到使用，但保留我的stat打印机。我认为这可能会奏效：
import webpackDev from 'webpack-dev-middleware'
app.use(webpackDev(w
浏览 4提问于2016-06-22得票数 2
回答已采纳
有一个多边形完整的事件被触发，但我正在寻找一个聚合启动事件。即使是跨层启动事件也适用于我。
当用户开始绘制多边形时，我希望删除地图上的任何现有多边形。目前，我已经使用polygoncomplete事件实现了该功能。不过，这需要在一开始就发生。
我的伪码想法是..。
听着点击地图上的事件。
单击鼠标，检查选择了哪个绘图工具(如果可能的话)。
如果选择多边形工具，则删除所有以前的多边形。
对于polygonstart事件来说，这要容易得多。
这里有一个类似的问题，但是隐藏和显示绘图控件不是此ui的一个选项。
浏览 7提问于2014-03-17得票数 4
请考虑以下代码。
<!DOCTYPE html>
<title>Question</title>
<script>
function report(handler, _this) {
alert(
"handler:\n" + handler + "\n" +
"this: " + _this + "\n" +
"event: " + event + "\n"
浏览 5提问于2020-06-19得票数 3
1回答
假设我有以下代码：
$('button').click(function onClick() {
$('#divResult').text(Math.rand());
});
setInterval(function timeout() {
console.log("Hello");
}, 300);
setInterval(function timeout() {
console.log("Hi");
}, 200);
setInterval(function timeout() {
co
浏览 2提问于2016-01-18得票数 3
如何将另一个选项添加到通过右键单击图标展开显示的上下文菜单中？
我试试看：
function addMenu(title) {
chrome.contextMenus.create({
title: title,
contexts: ["all"],
onclick: function() { console.log(1)}
});
}
addMenu('Log out');
我收到一个错误：
在运行runtime.lastError时未选中的contextMenus.create:使用事件页的扩
浏览 4提问于2015-09-22得票数 11
回答已采纳
我有一个php文件，回显一个带有<script>元素的超文本标记语言。如下所示：
<div>
<button onclick="FunctionName();">Click Me</button>
</div>
<script type="text/javascript" id="script1">
function FunctionName() {
/* block of code here */
}
</script>
浏览 0提问于2015-04-30得票数 0
我是javascript/jquery的新手。我有个小问题。我在java脚本文件中有一些类似以下内容的东西。
<button id="button1" onclick=click() />
<button id="button2" onclick=click() />
<button id="button3" onclick=click() />
因此，单击函数看起来像下面这样
click(id){
/do some thing
}
所以我的问题是，当按钮被单击时，我们如何将按钮id传递给函数。
<b
浏览 0提问于2010-09-14得票数 1
2回答
我有一个元素。用户单击它后，它将被激活，取决于下一次单击，用户get将得到他成功与否的消息。在这两种情况下，该项目将在单击后被停用。
然而，即使我成功地将item状态更改为"false“，这应该会阻止代码继续一次又一次地运行。以下是代码：
handleBoltcuttersClicked(){
this.props.dispatch(activate('boltcutters', true));
console.log('klik');
setTimeout(() => this.chainMechanics(), 100)
浏览 4提问于2017-11-22得票数 1
回答已采纳
我正在将单击事件绑定到超链接。单击超链接的值(内文本)保存在隐藏字段中。使用此值，我将在页面重新加载(ASP.NET)之后工作。这是可行的，但问题是：
如果我点击link1，一切都好。如果我点击link2，一切都好。
如果我单击link1，然后(非常快)单击link2，则隐藏字段具有旧值( link1)。
有人想办法解决这个问题吗？
$(function () {
var innertxt = "";
$("span[id$='myLink']").bind("click", function () {
innertxt
浏览 1提问于2011-12-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
