在Mouseover / out难题上创建/删除JS元素

Question

仅限JS。在鼠标悬停时，我正在调用一个函数，它创建了一个带有图像的div元素。 我将（this）作为参数传递给函数。该函数有效，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.
};

Answer 1

嗯，经过漫长而悲惨的试错会后，我已经弄明白了。 首先，我修改了使用数据生成和填充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>"

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

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

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