a标签设置不能点击（a标签不能点击的属性）

科技前沿 • 2025-05-06 19:22 • 阅读 54

大家好，我是讯享网，很高兴认识大家。

好的，以下是使用Angular和TypeScript实现点击保存按钮后禁用整个页面的鼠标点击事件的代码示例：

HTML代码：

&lt;button (click)=&quot;save()&quot;&gt;保存&lt;/button&gt; &lt;div class=&quot;mask&quot; *ngIf=&quot;isSaving&quot;&gt;&lt;/div&gt;

讯享网

CSS代码：

讯享网

讯享网.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; }

TypeScript代码：

import { Component, HostListener } from &#39;@angular/core&#39;; @Component({ selector: &#39;app-root&#39;, template: ` &lt;button (click)=&quot;save()&quot;&gt;保存&lt;/button&gt; &lt;div class=&quot;mask&quot; *ngIf=&quot;isSaving&quot;&gt;&lt;/div&gt; `, styles: [` .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } `] }) export class AppComponent { isSaving = false; click<em>ab</em>leElements: NodeListOf&lt;HTMLElement&gt;; constructor() { this.click<em>ab</em>leElements = document.querySelectorAll(&#39;button, a, input[type=&quot;button&quot;], input[type=&quot;submit&quot;]&#39;); } @HostListener(&#39;document:click&#39;, [&#39;$event&#39;]) onClick(event: MouseEvent) { if (this.isSaving) { event.preventDefault(); event.stopPropagation(); } } save() { // <em>禁用</em>所有可<em>点击</em>元素 for (let i = 0; i &lt; this.click<em>ab</em>leElements.length; i++) { this.click<em>ab</em>leElements[i].<em>dis</em><em>ab</em><em>led</em> = true; } // 显示遮罩层 this.isSaving = true; } // 恢复页面状态 restorePage() { for (let i = 0; i &lt; this.click<em>ab</em>leElements.length; i++) { this.click<em>ab</em>leElements[i].<em>dis</em><em>ab</em><em>led</em> = false; } this.isSaving = false; } }

在这个示例中，我们首先在组件的构造函数中获取了页面上所有可点击的元素，然后在 save() 方法中遍历所有可点击的元素，将它们的 disabled 属性设置为 true，并设置 isSaving 属性为 true 来显示遮罩层。为了防止用户通过点击页面其他地方来触发相关事件，我们还使用了一个 HostListener 来捕获整个文档的点击事件，并在 onClick() 方法中阻止它们的传播。当保存完成或者发生错误时，我们调用 restorePage() 方法来恢复页面状态。

a标签设置不能点击（a标签不能点击的属性）

相关推荐