sự kiện nhấp nút bị mất do hộp cảnh báo trong hộp văn bản onblur sự kiện

Tôi đã tạo biểu mẫu web đơn giản, chứa một hộp văn bản và một nút. Tôi đã nắm bắt sự kiện onblur của hộp văn bản.sự kiện nhấp nút bị mất do hộp cảnh báo trong hộp văn bản onblur sự kiện

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <script language="javascript" type="text/javascript"> 
    function onTextBoxBlur() 
    { 
     alert("On blur"); 
     return true; 
    } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:TextBox ID="TextBox1" runat="server" onblur="onTextBoxBlur();"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Text="Button" /> 
</form> 
</body> 
</html>

Khi tôi nhập một số giá trị vào hộp văn bản và nhấp vào nút, sự kiện onblur của hộp văn bản xảy ra nhưng nút onclick của nút đó không. Và, khi tôi loại bỏ các hộp cảnh báo từ chức năng js thì nó hoạt động tốt. Một số cách bấm nút sự kiện là sự kiện bị mất. Tôi nghĩ đó là do hộp cảnh báo. Bất kỳ ý tưởng tại sao điều này như vậy?

Nguồn

2010-07-14 Vinod T. Patil

Một "lần nhấp" của nút có hai phần, di chuột xuống và di chuột lên. Khi bạn di chuột xuống nút, nó sẽ lấy tiêu điểm - làm mờ hộp văn bản và kích hoạt cảnh báo của bạn. Vì hộp thoại cảnh báo là phương thức, chúng sẽ tạm dừng tất cả hoạt động trên trang để nút không phát hiện được chuột và nhấp chuột của bạn không hoàn thành.

Nó có thể là có thể làm việc xung quanh vấn đề bằng cách sử dụng một bộ đếm thời gian trong trường hợp mờ, và hủy bỏ mà hẹn giờ trong sự kiện mousedown của nút:

var timer; 
function onTextBoxBlur() 
{ 
    timer = window.setTimeout(function() { alert("On blur"); }, 0); 
    return true; 
} 

function onButtonMouseDown() 
{ 
    clearTimeout(timer); 
}

Nguồn

2010-07-14 10:49:20

có bất kỳ workarround nào cho điều này không? –

@Vinod T.Patil: không thực sự. Giải pháp "workaround" duy nhất sẽ đợi cho đến khi nhấp chuột hoàn tất hoặc tránh sử dụng 'alert'. –

một cách là, nhấp nút gọi một cách rõ ràng, như document.getElementById ("Button1"). Nhấp() ;, sau khi cảnh báo. Nó hoạt động. Nhưng, nó là ok cho ứng dụng mẫu như vậy, trong thực tế có thể có các hộp văn bản khác trên biểu mẫu và trong trường hợp đó tôi sẽ không muốn nhấn nút để được kích hoạt ngay lập tức sau khi tôi rời khỏi hộp văn bản đầu tiên. –

Viết một hàm và đưa ra một lời kêu gọi hoạt động từ nút của mousedown và onClick sự kiện

Nguồn

2010-07-14 15:40:06 SachinS

Got nó .... tôi đã nhận nó làm việc ...

Thêm cuộc gọi rõ ràng để click của nút trong sự kiện onblur là không đúng, bởi vì onblur sự kiện có thể xảy ra bất cứ lúc nào, như khi chúng tôi er di chuyển đến hộp văn bản khác hoặc bấm vào bất cứ nơi nào trong biểu mẫu, vv (như đã đề cập bởi Corey Ogburn trong các ý kiến ở trên). Vì vậy, nhấp vào nút sẽ được kích hoạt mặc dù người dùng đã không thực sự nhấp vào nút.

Vì vậy, trong sự kiện onblur phải có cách để xác định rằng việc gửi đang được nhấp và nếu nó sau đó kích hoạt nhấp chuột của nút một cách rõ ràng. Đây là mã,

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <script language="javascript" type="text/javascript"> 
    var clicked = 0; 

    function onTextBoxBlur() 
    { 
     alert("On blur " + clicked);  

     if(1 == clicked) 
     { 
      clicked = 0; 
      document.getElementById("Button1").click(); 
     } 

     return true; 
    } 
    function SubmitButtonClicked() 
    { 
     clicked = 1; 
    } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server" > 
    <div> 

    </div> 
    <asp:TextBox ID="TextBox1" runat="server" onfocusout="onTextBoxBlur();"></asp:TextBox> 
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Text="Button" onmousedown="SubmitButtonClicked();" />  
    </form> 
</body> 
</html>

đây, về sự kiện mousedown của nút, mà xảy ra trước onblur của hộp văn bản, tôi đã đặt một giá trị để cờ clicked và onblur của hộp văn bản, bây giờ tôi có thể xác định xem nút có đang được nhấp hay không.

Nhưng, một lần nữa đây chỉ là một workarround và OK cho ứng dụng mẫu như vậy :). Nó là ít khả thi trong thực tế bởi vì có thể có nhiều hơn như vậy gửi các nút trên biểu mẫu web và chúng tôi sẽ phải kích hoạt sự kiện bấm của tất cả các nút như vậy (liên kết vv) trong sự kiện onblur của hộp văn bản. Điều này là bởi vì, người dùng có thể nhấp vào bất kỳ nút gửi (liên kết vv) sau khi nhập dữ liệu vào hộp văn bản và cảnh báo/xác nhận trong onblur sẽ ngăn chặn những sự kiện nhấp chuột đó. Hy vọng tôi rõ ràng.

Thưởng thức !!!

Nguồn

2010-07-15 05:57:16

sự kiện nhấp nút bị mất do hộp cảnh báo trong hộp văn bản onblur sự kiện

Trả lời

Các vấn đề liên quan