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/mouse outを実行しないようにしました。 私はどの要素がマウスで終わっているのか分かりません。もし彼が画像上にないか、または私が作成したリンクでなければ、リンクを削除します。

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); 
    } 
} 

}

これが誰かを助けることを願っています... [重複したコンテンツを持つマウスオーバー、マウスアウト]の