<a>タグの上のマウス

Question

左下にプロンプ​​トが表示されます。 の上にマウスを置くと、この現象を禁止する方法を教えてください。 enter image description here

Answer 1

コメントとして、停止する動作はブラウザの機能です。

function maskAnchors() { 
 
    var els = document.querySelectorAll('a[href]'); 
 
    console.log("Anchors Found: ", els.length) 
 
    for (var i = 0; i < els.length; i++) { 
 
    els[i].setAttribute("data-url", els[i].getAttribute('href')); 
 
    els[i].removeAttribute("href"); 
 
    els[i].addEventListener("click", handleClick) 
 
    } 
 
} 
 

 
function handleClick() { 
 
    var url = this.getAttribute('data-url'); 
 
    window.open(url) 
 
} 
 

 
document.getElementById('btnAdd').addEventListener("click", function() { 
 
    var container = document.querySelector('.content'); 
 
    var link = document.createElement('a') 
 
    link.href = "www.google.com"; 
 
    link.textContent = "This is a newly added link"; 
 
    container.append(link) 
 
}) 
 

 
document.getElementById('btnMask').addEventListener("click", maskAnchors) 
 

 
window.addEventListener('load', maskAnchors)

.maskedAnchor { 
 
    color: -webkit-link; 
 
    text-decoration: underline; 
 
    cursor: auto; 
 
}

<div class="content"> 
 
    <a href="google.com">Google</a> 
 
    <a href="Facebook.com">Facebook</a> 
 
    <a href="StackOverflow.com">StackOverflow</a> 
 
    <a href="YouTube.com">YouTube</a> 
 
    <a href="Example.com">Example</a> 
 
    <a>blabla</a> 
 
</div> 
 
<button id="btnAdd">Add Anchor</button> 
 
<button id="btnMask">Run masking</button>

：

これを回避するために、次のコードを試すことができ、あなた自身にアンカーの挙動をシミュレートする必要がありますが、あなたは多くのアンカーを持って言ったように、あなたは手動でボタンにそれらを変換することはできません

注：

• がを削除10はスタイリングを変更します。また、手動で行う必要があります。
• これは、この関数の実行後に動的に追加されたアンカーを処理しません。この関数をもう一度呼び出す必要があります。私は持っているアンカーを取り出す機能を最適化しましたhref

希望します！