dom-events 相关问题

我有一个用于自定义复选框输入的模板：我有一个用于自定义复选框输入的模板： <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 事件将完全停止工作：  <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)">  </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; }

angular dom-events

回答 1 投票 0

如何使用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>

javascript dom-events

回答 11 投票 0

停止在 href 上传播点击事件

如何停止点击事件的传播以使浏览器不会重定向？所以 </desc> <question vote="4"> <p>如何停止传播点击事件以使浏览器不会重定向？</p> <pre><code><a id="theHref" href="http://stackoverflow.com/">SO</a> <script> document.getElementById("theHref").addEventListener("mousedown", function(event) { console.log("href clicked, lets try to stop event propagation"); event.stopPropagation(); event.preventDefault(); return false; }); </script> </code></pre> </question> <answer tick="true" vote="10"> <p>首先，你想监听“click”事件，而不是 mousedown</p> <pre><code>document.getElementById("theHref").addEventListener("click", function(event) { console.log("href clicked, lets try to stop event propagation"); 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><script> $(function(){ $("#theHref").click(function(){ return false; }); }); </script> </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("theHref").addEventListener("click", function(event) { console.log("href clicked, lets try to stop event propagation"); event.preventDefault(); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>试试这个。</p> <pre><code><a href="https://www.google.com/" onclick="event.stopPropagation()">Click Here</a> </code></pre> <p>元素上有一个默认的 <pre><code>event</code></pre> 对象可用。您可以访问它来禁用/停止事件传播。</p> </answer> </body></html>

javascript dom-events href

回答 0 投票 0

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

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

reactjs event-handling dom-events simple-html-dom onbeforeunload

回答 1 投票 0

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

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

javascript reactjs node.js dom-events touch-event

回答 1 投票 0

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

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