Javascript 鼠标悬停/弹出时JS元素的创建/删除难题

仅限JS。在mouseover上，我调用了一个函数，该函数创建了一个包含图像的div元素。 我将（此）作为参数传递给函数。该函数工作，onmouseover创建一个子元素，我可以单击它。然而，若我将鼠标添加到div之外以移除自身，那个么只有当我将鼠标悬停在它上面时，它才会这样做。如果我没有，div将保持不变，并在下一次悬停时添加另一个。如果我在父元素外添加鼠标以删除div，我将无法将鼠标悬停在子div上，因为一旦我离开父元素，子div就会被删除。父元素是表中“TD”内的（a href）。代码如下所示：

    <script type="text/javascript">

function PopPanel(ownerElem) {
    var myParent = ownerElem.parentNode;

    var popanel = document.createElement("div");
    popanel.className = "divPopPanel";
    popanel.setAttribute("display", "block")
    var phoneimg = document.createElement("img");
    phoneimg.src = '/images/ImageAdditions/Phone.png';
    phoneimg.className = "popupPhone";
    popanel.appendChild(phoneimg);

    phoneimg.onclick = function () {
        try {
            location.replace("Mylauncher:\\\\nas\\vol5\\SYSTEM\\ITR\\Scripts\\SomeProgram.exe" + " " + ownerElem.innerText);
        }
        catch (err) {

        }

    };

    myParent.appendChild(popanel);

    popanel.onmouseout = function (e) { this.parentNode.removeChild(this) };  //this removes itself on mouseout.

    myParent.onmouseout = function (e) { popanel.parentNode.removeChild(popanel) }; // this removes the child element of the parent (which is the same element as above) on mouse out.
};

功能PopPanel（ownerElem）{
var myParent=ownerElem.parentNode；
var popanel=document.createElement（“div”）；
popanel.className=“divpopanel”；
setAttribute（“显示”、“块”）
var phoneimg=document.createElement（“img”）；
phoneimg.src='/images/ImageAdditions/Phone.png'；
phoneimg.className=“popupPhone”；
popanel.appendChild（phoneimg）；
phoneimg.onclick=函数（）{
试一试{
location.replace（“Mylauncher:\\\\nas\\vol5\\SYSTEM\\ITR\\Scripts\\SomeProgram.exe”+“”+ownerElem.innerText）；
}
捕捉（错误）{
}
};
我的父母和孩子（popanel）；
popanel.onmouseout=函数（e）{this.parentNode.removeChild（this）}；//这会在mouseout上删除自身。
myParent.onmouseout=function（e）{popanel.parentNode.removeChild（popanel）}；//这将在mouse out时删除父元素的子元素（与上面的元素相同）。
};

---

好吧，经过漫长而痛苦的反复试验，我终于明白了这一点。 首先，我修改了生成gridview并用数据填充它的代码，如下所示： VB.net

    dt.Columns.Add("InternalPhoneDialer", Type.GetType("System.String"))
    Dim rn As New Random
    Dim randNum As Integer = rn.Next(12, 428)
    Dim internalphone As String = dr("InternalPhone").ToString
        If internalphone.Contains(" ") Then
            internalphone = internalphone.Substring(0, internalphone.IndexOf(" "))
            internalphone = internalphone & randNum.ToString()
        Else
            internalphone = internalphone & randNum.ToString()
        End If
    //Substitute the current column with the newly created one above
    dr("InternalPhoneDialer") = "<div id='popPanelWrapper" & internalphone & "' onmouseover='PopPanel(" & "popPanelWrapper" & internalphone & ");' onmouseleave='PopPanelClose(" & "popPanelWrapper" & internalphone & ");'> <a class='popPanelLink' href='javascript:void(0);' >" & dr("InternalPhone") & "</a> </div>"

    <script type="text/javascript">

function PopPanel(ownerElem) {
    var myParent = ownerElem;
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        return
    } else {
        var phoneimg = document.createElement("img");
        phoneimg.src = '/_layouts/15/images/ImageAdditions/Phone.png';
        phoneimg.id = "popupPhone";
        phoneimg.setAttribute("display", "block")
        myParent.appendChild(phoneimg);
    }
    phoneimg.onclick = function () {
        try {
            location.replace("launcher:\\\\drive01\\vol1\\SYSTEM\\ITR\\Scripts\\Jabber.exe" + " " + ownerElem.innerText);
        }
        catch (err) {

        }
    };
};

function PopPanelClose(ownerElem) {
    var myParent = ownerElem;
    var phoneimg = document.getElementById("popupPhone");
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        phoneimg.parentNode.removeChild(phoneimg);
    } else {
        return
    }
};

dt.Columns.Add（“InternalPhoneDialer”，Type.GetType（“System.String”））
Dim rn作为新的随机变量
Dim randNum As Integer=rn.Next（12428）
Dim internalphone As String=dr（“internalphone”）.ToString
如果internalphone.Contains（“”），则
internalphone=internalphone.Substring（0，internalphone.IndexOf（“”）
internalphone=internalphone&randNum.ToString（）
其他的
internalphone=internalphone&randNum.ToString（）
如果结束
//用上面新创建的列替换当前列
dr（“内部电话拨号程序”）=“”

我已经确保将一个唯一的id连接到每个div，以防另一列的电话号码相同（在这里我实现了相同的解决方案）。因此，我添加了列内部内容+一个随机数，并将其连接到DIV名称。 然后，在客户端，我修改了脚本，如下所示： JavaScript

    dt.Columns.Add("InternalPhoneDialer", Type.GetType("System.String"))
    Dim rn As New Random
    Dim randNum As Integer = rn.Next(12, 428)
    Dim internalphone As String = dr("InternalPhone").ToString
        If internalphone.Contains(" ") Then
            internalphone = internalphone.Substring(0, internalphone.IndexOf(" "))
            internalphone = internalphone & randNum.ToString()
        Else
            internalphone = internalphone & randNum.ToString()
        End If
    //Substitute the current column with the newly created one above
    dr("InternalPhoneDialer") = "<div id='popPanelWrapper" & internalphone & "' onmouseover='PopPanel(" & "popPanelWrapper" & internalphone & ");' onmouseleave='PopPanelClose(" & "popPanelWrapper" & internalphone & ");'> <a class='popPanelLink' href='javascript:void(0);' >" & dr("InternalPhone") & "</a> </div>"

    <script type="text/javascript">

function PopPanel(ownerElem) {
    var myParent = ownerElem;
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        return
    } else {
        var phoneimg = document.createElement("img");
        phoneimg.src = '/_layouts/15/images/ImageAdditions/Phone.png';
        phoneimg.id = "popupPhone";
        phoneimg.setAttribute("display", "block")
        myParent.appendChild(phoneimg);
    }
    phoneimg.onclick = function () {
        try {
            location.replace("launcher:\\\\drive01\\vol1\\SYSTEM\\ITR\\Scripts\\Jabber.exe" + " " + ownerElem.innerText);
        }
        catch (err) {

        }
    };
};

function PopPanelClose(ownerElem) {
    var myParent = ownerElem;
    var phoneimg = document.getElementById("popupPhone");
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        phoneimg.parentNode.removeChild(phoneimg);
    } else {
        return
    }
};

功能PopPanel（ownerElem）{
var myParent=ownerElem；
var phoneimgexist=！！document.getElementById（“Popuphone”）；
if（phoneimgexist）{
回来
}否则{
var phoneimg=document.createElement（“img”）；
phoneimg.src='/_layouts/15/images/ImageAdditions/Phone.png'；
phoneimg.id=“popupPhone”；
setAttribute（“显示”、“块”）
myParent.appendChild（phoneimg）；
}
phoneimg.onclick=函数（）{
试一试{
location.replace（“启动器：\\\\drive01\\vol1\\SYSTEM\\ITR\\Scripts\\Jabber.exe”+“”+ownerElem.innerText）；
}
捕捉（错误）{
}
};
};
函数PopPanelClose（ownerElem）{
var myParent=ownerElem；
var phoneimg=document.getElementById（“popupPhone”）；
var phoneimgexist=！！document.getElementById（“Popuphone”）；
if（phoneimgexist）{
phoneimg.parentNode.removeChild（phoneimg）；
}否则{
回来
}
};

现在，将鼠标放在包含电话号码的GridVew手机上，我会看到一个图标。通过点击它，我可以拨打这个号码。 在我看来，这个解决方案更适合这个任务，而不是为GridView中可能有数千个条目的每一行创建一个包含图像和数据的隐藏div。 这无疑节省了大量资源