dom-events 相关问题

如何在addEventListener中使用函数传递参数？

按照传统方式添加事件监听器： 函数 getComboA(sel) { var value = sel.options[sel.selectedIndex].value; } 传统方式添加事件监听： function getComboA(sel) { var value = sel.options[sel.selectedIndex].value; } <select id="comboA" onchange="getComboA(this)"> <option value="">Select combo</option> <option value="Value1">Text1</option> <option value="Value2">Text2</option> <option value="Value3">Text3</option> </select> 但我想适应addEventListener方式： productLineSelect.addEventListener('change',getSelection(this),false); function getSelection(sel){ var value = sel.options[sel.selectedIndex].value; alert(value); } 它不起作用，因为我无法将 getSelection() 中的任何参数作为 addEventListener 方法中的第二个参数传递？据我所知，我只能使用不带括号的函数名称。 有什么想法吗？ 顺便说一句，请看看我之前的问题关于console.log在Safari 6.0开发者检查器中不起作用，我无法在控制台中写入任何输出，这令人沮丧。 无需传入任何内容。用于 addEventListener 的函数将自动将 this 绑定到当前元素。只需在函数中使用 this 即可： productLineSelect.addEventListener('change', getSelection, false); function getSelection() { var value = this.options[this.selectedIndex].value; alert(value); } 这是小提琴：http://jsfiddle.net/dJ4Wm/ 如果您想将任意数据传递给函数，请将其包装在您自己的匿名函数调用中： productLineSelect.addEventListener('change', function() { foo('bar'); }, false); function foo(message) { alert(message); } 这是小提琴：http://jsfiddle.net/t4Gun/ 如果要手动设置this的值，可以使用call方法来调用该函数： var self = this; productLineSelect.addEventListener('change', function() { getSelection.call(self); // This'll set the `this` value inside of `getSelection` to `self` }, false); function getSelection() { var value = this.options[this.selectedIndex].value; alert(value); } 在 JS 代码的第一行： select.addEventListener('change', getSelection(this), false); 您通过将 (this) 放在函数引用后面来调用 getSelection。这很可能不是您想要的，因为您现在将该调用的返回值传递给 addEventListener，而不是对实际函数本身的引用。 在 addEventListener 调用的函数中，this 的值将自动设置为侦听器附加到的对象，在本例中为 productLineSelect。 如果这就是您想要的，您只需传递函数引用即可，在本示例中，在 addEventListener 的调用中，this 将是 select： select.addEventListener('change', getSelection, false); 如果这不是你想要的，你最好bind你对此的价值到你传递给的函数addEventListener： var thisArg = { custom: 'object' }; select.addEventListener('change', getSelection.bind(thisArg), false); .bind部分也是一个调用，但是这个调用只是返回我们调用bind的相同函数，并且该函数范围内this的值fixed到thisArg，有效地覆盖了this 绑定的动态性质。 要解决您的实际问题：“如何将参数传递给 addEventListener 中的函数？” 您必须使用额外的函数定义： var globalVar = 'global'; productLineSelect.addEventListener('change', function(event) { var localVar = 'local'; getSelection(event, this, globalVar, localVar); }, false); 现在我们传递事件对象、对 addEventListener 回调内的 this 值的引用、在该回调内定义和初始化的变量，以及从整个 addEventListener 调用外部到您自己的 getSelection 函数的变量。 我们也可能再次选择一个对象作为外部回调中的this： var thisArg = { custom: 'object' }; var globalVar = 'global'; productLineSelect.addEventListener('change', function(event) { var localVar = 'local'; getSelection(event, this, globalVar, localVar); }.bind(thisArg), false); 当您使用addEventListener时，this将自动绑定。因此，如果您想要引用安装了事件处理程序的元素，只需在函数中使用 this 即可： productLineSelect.addEventListener('change',getSelection,false); function getSelection(){ var value = sel.options[this.selectedIndex].value; alert(value); } 如果你想从调用 addEventListener 的上下文中传递一些其他参数，你可以使用闭包，如下所示： productLineSelect.addEventListener('change', function(){ // pass in `this` (the element), and someOtherVar getSelection(this, someOtherVar); },false); function getSelection(sel, someOtherVar){ var value = sel.options[sel.selectedIndex].value; alert(value); alert(someOtherVar); } 如果您想要的 this 值正是您将事件处理程序绑定到的对象，那么 addEventListener() 已经为您完成了该操作。当你这样做时： productLineSelect.addEventListener('change', getSelection, false); getSelection 函数将被调用，并将 this 设置为事件处理程序绑定到的对象。它还将传递一个表示事件对象的参数，该对象具有有关事件的各种对象信息。 function getSelection(event) { // this will be set to the object that the event handler was bound to // event is all the detailed information about the event } 如果所需的 this 值是您绑定事件处理程序的对象之外的其他值，您可以这样做： var self = this; productLineSelect.addEventListener('change',function() { getSelection(self) },false); 作为解释： 您将 this 的值保存到其他事件处理程序中的局部变量中。 然后创建一个匿名函数来传递 addEventListener。 在该匿名函数中，您调用实际函数并向其传递 this 的保存值。 您可以通过两种方式做到这一点。一种是使用 curry 函数，另一种是使用 bind。可能还有另一种使用 call 的方式。

在事件处理程序中使用它

我试图在 DOM 级别 3 事件规范的事件处理函数中找到 this 关键字的含义。 根据我的实验，这是指 event.currentTarget 对象。 这是行为吗

如何使用 Google Sheet 的 JavaScript 的 on Change 触发器来更改填充有过滤功能的单元格的字体颜色？

我有一个带有过滤功能的单元格。我想在值发生变化时为过滤函数填充的单元格设置找到的颜色。 onEdit 适用于手动更改的单元格...

使用 Cypress，如何测试尝试关闭选项卡会导致显示确认框？

我想测试关闭选项卡（或重新加载选项卡）是否会显示确认框。如果用户单击“取消”，确认框应该消失并且页面不会重新加载...

addEventListener 不适用于从 javascript 添加的新类选择的元素

我试图让按钮在单击评级时起作用。否则我不会让按钮 addEventListener 工作 我确实使用 conso 检查了所有元素是否正确循环...

React 中的材质 UI：使 <Paper> 组件可点击

我想让 Paper 组件可点击。我怎样才能实现这个目标？我尝试在标签中设置一个 id 属性（如 ()），然后使用 DOM 添加事件侦听器，但它不起作用。我是...

单击鼠标隐藏表格列

我有一个表格，我想在双击某列时隐藏某列。 隐藏列的代码实际上遍布 Stack Overflow。我所需要的只是关于如何/在哪里添加 ondblclick e 的提示...

检测节点何时被删除（或因为父节点被删除而从 DOM 中删除）

我想检测节点（例如nodeX）何时不再可用，要么是因为它被删除了，要么是因为它的父节点（或其父节点）被删除了。 目前为止我能想到的就是用Muta...

禁用 Enter 键 Chrome 扩展

我想在特定页面使用 JavaScript 禁用 Chrome 扩展程序中的 Enter 键。例如：在登录页面上，用户不应按 Enter 登录，而应单击“登录”按钮...

如何判断点击事件是否为假冒？

如何知道点击事件是否是用户生成的？ （他们使用鼠标）。 相反的是由一段 JavaScript 触发的点击事件。 在显示

Blazor App（服务器渲染）-> 处理 DOM 对象大小更改的服务

Javascript 不是我最强大的部分，绝对不与 Blazor 结合使用，但与 Google 和一些 AI 合作，获得了一个事件侦听器，如果浏览器大小发生变化，该事件侦听器可以在我的 Blazor 应用程序上运行代码。 不...

切换到编辑模式时触发表单提交事件

我有一个 React 组件，它显示用户数据并提供就地编辑数据的选项。 当我单击编辑按钮时，会触发表单提交操作。 我已标记“编辑”按钮...

event 是回调链中任何地方都可以访问的全局变量吗？

我只是在使用 DOM 和 Javascript 来玩弄事件监听器，并注意到了这一点： 函数链（消息）{ console.log(消息，事件); } 函数 onClick() { 被锁起来（'身体被清除了...

自定义复选框触发两次

我有一个用于自定义复选框输入的模板： 我有一个用于自定义复选框输入的模板： <label *ngIf="grouped" class="field-check" [class.field-error]="errors" [class.no-events]="readonly"> <ng-container [ngTemplateOutlet]="inputTmp" [ngTemplateOutletContext]="{}"></ng-container> <ng-container *ngIf="labeled"> <span *ngIf="!labelTemplate" class="field-check--slabel" [ngClass]="inxs" [innerHTML]="label"></span> <div *ngIf="labelTemplate" class="field-check--temp"> <ng-container [ngTemplateOutlet]="labelTemplate" [ngTemplateOutletContext]="{}"></ng-container> </div> </ng-container> </label> <div *ngIf="!grouped" class="field-check" [class.no-events]="readonly"> <ng-container [ngTemplateOutlet]="inputTmp" [ngTemplateOutletContext]="{}"></ng-container> <span *ngIf="!labelTemplate" [ngClass]="inxs" [innerHTML]="label"></span> <div *ngIf="labelTemplate" class="field-check--temp" [ngClass]="inxs"> <ng-container [ngTemplateOutlet]="labelTemplate" [ngTemplateOutletContext]="{}"></ng-container> </div> </div> <ng-template #inputTmp> <div class="ultim-checkbox" [class.readonly]="readonly || disabled" [class.checked]="checked" [class.intermediate]="intermediate" (click)="toggleCheck($event)"> <input type="checkbox" tabindex="0" [required]="required" [ngModel]="value" [disabled]="disabled" [attr.intermediate]="intermediate || null" #fieldInput="ngModel" #cb> <span><i class="ico" [ngClass]="{ 'i-check-fat': !intermediate, 'i-minus-fat': intermediate }"></i></span> </div> </ng-template> 当单击标签（HTML 元素“label”或包含复选框标签的 span 元素）时，一切都会按预期进行。当直接点击“ico”图标时，点击事件会被触发两次。结果是该复选框明显保持不变，因为它在同一人类交互中被设置为两个相反的值。 event.target 第一个事件是“.ico”元素，第二个事件的目标是实际隐藏的输入元素。 这是组件的代码 public toggleCheck(event: MouseEvent): any { if ( this.checkboxGroup ) { this.checkboxGroup.addOrRemove(this.value); } else { this.value = !this.value; } this.intermediate = false; } 这是输入元素的 CSS 代码（如果有帮助的话） .field-check .ultim-checkbox input { position: absolute; -webkit-appearance: none; appearance: none; width: 1px; height: 1px; z-index: 0; } 如果我添加 event.stopPropagation() 或 event.preventDefault() 那么 change 事件将完全停止工作： <!-- doSomething is never called --> <custom-checkbox (change)="doSomething($event)"></custom-checkbox> 虽然复选框明显发生变化，但缺少的更改事件不会触发数据更改（例如 RxJS、API 等）。 有什么想法，为什么会触发两次？ 我有一种强烈的感觉，它的发生是因为输入元素上的 [ngModel]。您使用它来设置 value :) 的值，然后在 toggleCheck() 函数中再次设置它（实际上是恢复它）。 <div class="ultim-checkbox" [class.readonly]="readonly || disabled" [class.checked]="checked" [class.intermediate]="intermediate" (click)="toggleCheck($event)"> <!-- Either remove ngModel > <input type="checkbox" tabindex="0" [required]="required" [ngModel]="REMOVE_ME" /> <span> <!-- ... --> </span> </div> 或者不要这样做： public toggleCheck(event: MouseEvent): any { if (this.checkboxGroup) { this.checkboxGroup.addOrRemove(this.value); } else { // Or don't set the value here // Although I'm not sure how the condition above affects this. this.value = !this.value; } this.intermediate = false; }

如何使用JavaScript检查按钮是否被点击

有没有一种简单的方法可以按照以下方式做一些事情： JavaScript： if(document.getElementById('button').clicked == true) { Alert("按钮被点击"); } HTML： 有没有一种简单的方法可以按照这些思路做一些事情： JavaScript： if(document.getElementById('button').clicked == true) { alert("button was clicked"); } HTML： <input id="button" type="submit" name="button" value="enter"/> 您可以为此添加一个单击事件处理程序： document.getElementById('button').onclick = function() { alert("button was clicked"); }​;​ 这会在单击时发出警报，如果您想稍后跟踪它，只需在该函数中将变量设置为 true 而不是警报，或者 variable++ 如果您想计算点击次数，无论您的最终用途是什么。 您可以在此处查看示例。 尝试添加点击事件侦听器： document.getElementById('button').addEventListener("click", function() { alert("You clicked me"); }​);​ 使用 addEventListener 可能比设置 onclick 更好 - onclick 可以很容易地被另一段代码覆盖。 您可以使用变量来存储按钮之前是否被点击过： var clicked = false document.getElementById('button').addEventListener("click", function() { clicked = true }​);​ 在 MDN 上添加事件监听器 这样就可以了 <input id="button" type="submit" name="button" onclick="myFunction();" value="enter"/> <script> function myFunction(){ alert("The button was pressed"); }; </script> 这里的所有答案都讨论了 onclick 方法，但是您也可以使用 addEventListener()。 addEventListener()的语法 document.getElementById('button').addEventListener("click",{function defination}); 上面的函数定义称为匿名函数。 如果你不想使用匿名函数，你也可以使用函数引用。 function functionName(){ //function defination } document.getElementById('button').addEventListener("click",functionName); 您可以在此答案中查看 onclick() 和 addEventListener() 之间的详细差异此处。 只需挂接 onclick 事件即可： <input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/> $("#button").on('click',function(){ //do something }); 你可以这样做： <button onClick="funtion()">Button Goes Here</button function alert(){ console.log('Alert Showed'); alert('You clicked me!'); } <button onClick="alert()">Click me to get alerted</button> function check() { console.log("Button Clicked"); }; var button= document.querySelector("button"); // Accessing The Button // button.addEventListener("click", check); // Adding event to call function when clicked // document.querySelector("#button").addEventListener("click", () => { console.log("button was clicked"); }) // this event listener will help you detect clicks on the document document.addEventListener('click', function(e){ // <event>.<target>.<id> check that the id is 'button' if(e.target.id === 'button'){ // do something here console.log(e.target.id); } } 更简单的方法是通过 html onclick <input id="button" onclick= 'your function here' type="submit" name="button" value="enter"/> 或使用按钮 <button id="button" onclick= 'your function here' type="submit" name="button" value="enter">Your text here </button>

停止在 href 上传播点击事件

如何停止点击事件的传播以使浏览器不会重定向？ 所以 </desc> <question vote="4"> <p>如何停止传播点击事件以使浏览器不会重定向？</p> <pre><code>&lt;a id=&#34;theHref&#34; href=&#34;http://stackoverflow.com/&#34;&gt;SO&lt;/a&gt; &lt;script&gt; document.getElementById(&#34;theHref&#34;).addEventListener(&#34;mousedown&#34;, function(event) { console.log(&#34;href clicked, lets try to stop event propagation&#34;); event.stopPropagation(); event.preventDefault(); return false; }); &lt;/script&gt; </code></pre> </question> <answer tick="true" vote="10"> <p>首先，你想监听“click”事件，而不是 mousedown</p> <pre><code>document.getElementById(&#34;theHref&#34;).addEventListener(&#34;click&#34;, function(event) { console.log(&#34;href clicked, lets try to stop event propagation&#34;); event.preventDefault(); return false; }); </code></pre> <p>不确定你是否需要 return false - 我永远记不起这样的跨浏览器细微差别：p return false 不会停止 Firefox，例如</p> </answer> <answer tick="false" vote="0"> <p>只需尝试使用 return false 这是一个简单的方法，不会让你重定向</p> <pre><code>&lt;script&gt; $(function(){ $(&#34;#theHref&#34;).click(function(){ return false; }); }); &lt;/script&gt; </code></pre> <p>只需参考这个小提琴<a href="http://jsfiddle.net/4nhktocy/" rel="nofollow">小提琴</a></p> </answer> <answer tick="false" vote="0"> <p>这应该有效：</p> <pre><code>document.getElementById(&#34;theHref&#34;).addEventListener(&#34;click&#34;, function(event) { console.log(&#34;href clicked, lets try to stop event propagation&#34;); event.preventDefault(); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>试试这个。</p> <pre><code>&lt;a href=&#34;https://www.google.com/&#34; onclick=&#34;event.stopPropagation()&#34;&gt;Click Here&lt;/a&gt; </code></pre> <p>元素上有一个默认的 <pre><code>event</code></pre> 对象可用。您可以访问它来禁用/停止事件传播。</p> </answer> </body></html>

删除 beforeunload 事件在 React 中不起作用

下面的代码片段假设添加和删除事件监听器handleBeforeUnload。在检查浏览器控制台时，我看到打印了“inside else”，但是加载页面仍然如此......

onClick 或 onTouchEnd 不适用于 iOS，但适用于桌面

我正在创建一个网站，我需要在页面上显示不同的产品卡并提供 URL。我在桌面浏览器中进行了测试，无论是内部还是外部，onClick 都能正确触发...

Bootstrap 5 data-bs-toggle“折叠”防止通过单击 div 中的按钮进行操作

我有一个带有 data-bs-toggle 属性的 < div >。在该 div 中我有按钮 单击它时面板会折叠，但我不希望单击

触发 React 渲染输入的更改事件（类型=范围）

“反应”：“^15.4.2” 我无法从 jquery 触发使用 React 渲染的输入的更改事件。 我需要这样做来进行一些端到端测试。 这是一个沙盒作为完整的展示：