javascript在圖像懸停上添加鏈接>在鏈接懸停時保持鏈接處於活動狀態

Question

懸停圖像時，我試圖在圖像上添加鏈接。 目前，我的JavaScript如下：

// check elements mouse is hover
document.addEventListener("mouseover", addCropLink, true);
document.addEventListener("mouseout", removeCropLink, true);
// add link if element is image
function addCropLink(){
    var target = event.target;
    if (target instanceof HTMLImageElement){
        var cropLink = document.createElement("a");
        cropLink.setAttribute("class", "resizeMyPhoto");
        cropLink.setAttribute("id", "resizeMyPhoto");
        cropLink.setAttribute("target", "_blank");
        cropLink.innerHTML += "Crop/Resize";
        cropLink.href = chrome.extension.getURL("index.html#");
        cropLink.href = cropLink.href + target.src;
        target.parentNode.style.position = "relative";
        target.parentNode.style.display = "inline-block";
        target.parentNode.insertBefore(cropLink, target.nextSibling);
    }
}

// remove link if element is image
function removeCropLink(){
    var target = event.target;
    if (target instanceof HTMLImageElement){
        var cropLink = document.getElementById("resizeMyPhoto");
        cropLink.parentNode.removeChild(cropLink);
    }
}

問題是，當用戶嘗試單擊鏈接時，他正在從圖像中進行鼠標移出操作，並且鏈接被刪除。

有人可以提出解決方案嗎？

使用mouseout / mouseleave 編輯無法解決問題。

Answer 1

確定，所以我更改了腳本，因此根本無法在mosueleave /鼠標上運行。 我正在查看鼠標懸停在哪個元素上，如果他不在圖像或我創建的鏈接上，則刪除該鏈接。 這是帶有注釋的完整javascript：

iconURL = chrome.extension.getURL("/icons/button-icon.png");
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
// handles creating of the crop link
function setLink(){
var target = event.target;
if (target instanceof HTMLImageElement){
    // make sure no links are visible
    var cropLink = document.getElementById("resizeMyPhoto");
    if (cropLink !== null){
        cropLink.parentNode.removeChild(cropLink);
    }
    // create the link
    else{
        cropLink = document.createElement("a");
        cropLink.setAttribute("class", "resizeMyPhoto");
        cropLink.setAttribute("id", "resizeMyPhoto");
        cropLink.setAttribute("target", "_blank");
        cropLink.innerHTML += "Crop/Resize";
        cropLink.href = chrome.extension.getURL("index.html#") + target.src;
        target.parentNode.style.position = "relative";
        target.parentNode.style.display = "inline-block";
        target.parentNode.insertBefore(cropLink, target.nextSibling);
    }
}
else{
    var cropLink = document.getElementById("resizeMyPhoto");
    // make sure mouse is not on link
    if(target == cropLink || cropLink == null){
        return;
    }
    // remove the link
    else{
        cropLink.parentNode.removeChild(cropLink);
    }
} 

}

希望這會幫助某人...