列表框上的EventListener在物品掉落后不再工作[所有javascript功能在成功掉落后停止]

EventListener on listbox no longer works after item dropped [All javascript functionality ceases after a successful drop]

本文关键字：功能 javascript 所有 成功 工作 不再 列表 EventListener      更新时间：2023-09-26

这是一个概念验证项目，尝试使用javascript在列表框上启用事件侦听器，并对同一列表框执行javascript拖放操作。

在执行代码时，如果我先单击列表框，则绑定到事件侦听器(pickupSticks)的javascript函数执行，如一对警告语句所示。

但是，如果我在第一个文本框中放置一些文本并将其拖放到第一个列表框中，则单击事件不再触发。如果我使用实际的按钮移动数据一次，也会发生同样的事情。

我的javascript包含的原因是，它是，它似乎必须在addEventListener可以找到列表框或返回错误之前创建对象(无法找到对象)。

让我困惑的是eventListener和javascript代码在成功drop后的明显失活。

违约。ASPX 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test D&D and Click Event on listbox</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
        <ContentTemplate>
        <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:TextBox ID="TextBox2" draggable ="true"  ondragstart = "drag(event)" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <asp:ListBox ID="ListBox1" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"  runat="server"></asp:ListBox>
         <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
         </div>
         </ContentTemplate>
         </asp:UpdatePanel>
   </form>
   <script src = "dragndrop.js"></script>
   </body>
   </html>

Default.aspx.js如下所示:

using System;
//project compiles and executes without these libraries.
//using System.Collections.Generic;
//using System.Web;
//using System.Web.UI;
//using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            ListBox1.Items.Add("Apples");
            ListBox1.Items.Add("Bananas");
            ListBox1.Items.Add("Oranges");
            TextBox2.Focus();
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        ListBox1.Items.Add(TextBox2.Text);
        TextBox1.Text = ListBox1.Items.Count.ToString();
        for (int i = 0; i < ListBox1.Items.Count; i++)
        {
            ListBox2.Items.Add(ListBox1.Items[i]);
        }
        TextBox2.Text = "";
        TextBox2.Focus();
    }
    protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
    //this fires only when adding an element to the listbox    
    TextBox2.Text = ListBox1.SelectedIndex.ToString();
    }
}

dragNdrop.js: 

//dragNdrop.js
//add event listeners
var mouseClick = document.getElementById("ListBox1");
mouseClick.addEventListener("click", pickupSticks, false);
var mouseClick = document.getElementById("ListBox2");
mouseClick.addEventListener("click", pickupSticks, false);
//base functions
function drag(ev) {
           ev.dataTransfer.setData("text", ev.target.id);
       }
function drop(ev) {
    document.getElementById("Button1").click();
    ev.preventDefault();
}
function allowDrop(ev) {
    //get and store the target listbox id
    ev.preventDefault();
    var x = event.clientX, y = event.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y);
    target = elementMouseIsOver.id;
    document.getElementById("TextBox1").value = target;
}
//special functions
function pickupSticks()
{
    alert("PickupSticks");
    var x = event.clientX, y = event.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y);
    target = elementMouseIsOver.id;
    document.getElementById("TextBox1").value = target;
    alert(document.getElementById(target).selectedIndex);
}

对于可能发生的事情，我有一个理论。

我注意到你的。net控件在一个更新面板内。更新面板是抽象一些ajax行为的一种方式。

所以，第一次尝试，一切都工作。但是，我看到ListBox1在你的c#代码中有一个服务器端事件处理程序。这告诉我它可能被发送回服务器。如果是，则意味着在回发之后，更新面板的内容将被重新创建。

所以，在你的javascript中，你最初绑定的列表框已经消失了。这里有一个新的，在各方面看起来都很像，但它不是相同的。

对于这个实例，我建议您使用所有服务器端，所有客户端，或者在每次绘制更新面板时调用一个函数来重新绑定您的事件处理程序。

相关文章：