sự kiện onclick không kích hoạt sau sự kiện onchange

Có ai biết cách thực hiện một sự kiện JavaScript đơn giản onclick cháy nếu quá trình nhấp vào phần tử gây ra sự kiện onchange để kích hoạt ở nơi khác trên trang không? Tôi đã tạo một trang rất đơn giản để chứng minh vấn đề này:sự kiện onclick không kích hoạt sau sự kiện onchange

<html> 
    <body> 
     <input type="text" name="test" id="test1" onchange="return change(event);" /> 
     <a href="#" id="test2" onclick="return bang();">Bang</a> 
     <a href="#" id="test3" onclick="return boom();">Boom</a> 
     <script type="text/javascript"> 
      function change(event) { 
       alert("Change"); 
       return true; 
      } 

      function bang() { 
       alert("Bang!"); 
       return true; 
      } 

      function boom() { 
       alert("Boom!"); 
       return true; 
      } 
     </script> 
    </body> 
</html>

Nếu bạn nhấp vào liên kết bang bạn nhận được Bang! cảnh báo. Boom cung cấp cho bạn thông báo Boom. Và nếu bạn nhập văn bản vào trường văn bản và tab, bạn sẽ nhận được thông báo Thay đổi. Tất cả tốt và tốt.

Tuy nhiên, nếu bạn nhập văn bản vào trường văn bản và, không tabbing hoặc nhấp vào bất kỳ thứ gì khác trước, hãy nhấp vào Bằng hoặc Bùng bạn sẽ nhận được thông báo Thay đổi và không có gì khác. Tôi hy vọng sẽ thấy cảnh báo Thay đổi theo sau là Bang hoặc Boom.

Điều gì đang xảy ra ở đây? Sự kiện thay đổi của tôi trả về true. Làm cách nào để đảm bảo rằng sự kiện nhấp chuột của tôi được kích hoạt?

Nguồn

2013-07-16 Robert MacGrogan

Mẹo: tạo fiddle trên http://jsfiddle.net/ và chia sẻ tại đây. Điều này giúp mọi người dễ dàng thử nghiệm và trợ giúp hơn. –

Có lẽ bạn nên sử dụng addEventListener thay vì gán chúng thông qua html như một mẹo nhỏ. – Sir

Hãy thử với 'console.log' thay vì' alert'. – j08691

Vấn đề là các alert() chức năng lấy chuỗi sự kiện bằng cách nào đó, thử nghiệm này:

<html> 
<body> 
    <input type="text" name="test" id="test1" onchange="return change(event);" /> 
    <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a> 
    <script type="text/javascript"> 
     function change(event) { 
      console.log("change"); 
      return true; 
     } 

     function bang() { 
      console.log("bang"); 
      return true; 
     } 

     function boom() { 
      console.log("boom"); 
      return true; 
     } 
    </script> 
</body>

Như bạn sẽ thấy bạn sẽ nhận được các hành vi dự kiến trong giao diện điều khiển.

JSBin

Nguồn

2013-07-16 19:54:48 bitoiu

Cảm ơn bạn. Điều này giải quyết vấn đề trước mắt của tôi. Tôi cảm thấy một kẻ ngốc. :) –

Thay vì cố gắng và nhân rộng vấn đề của bạn, tôi chỉ tạo ra dung dịch trong jsFiddle.

Tôi đã tách riêng HTML và JavaScript của bạn.

HTML

<input type="text" name="test1" id="test1" /> 
<a href="#" id="test2">Bang</a> 
<a href="#" id="test3">Boom</a>

Javascript

var test1 = document.getElementById("test1"); 
var test2 = document.getElementById("test2"); 
var test3 = document.getElementById("test3"); 

test1.onchange = function (event) { 
    alert("Change"); 
}; 

test2.onclick = function() { 
    alert("Bang!"); 
}; 

test3.onclick = function() { 
    alert("Boom!"); 
};

Sau khi thực hiện một sự thay đổi trong hộp văn bản và nhấn ra bên của nó sẽ kích hoạt sự kiện onchange, và onclick sự kiện sẽ vẫn ngọn lửa. Nếu bạn muốn cảnh báo thay đổi kích hoạt cho mỗi thay đổi đột quỵ chính onchange đến onkeyup.

Nguồn

2013-07-16 20:21:54 defaultNINJA

Bạn đã tạo lại sự cố ... Mã này có lỗi giống như bản gốc đã được người gửi đăng. – Steven

@Steven Sau đó, tôi không thực sự thấy lỗ hổng là gì, trừ khi nó là trình duyệt cụ thể. Bởi vì với Chrome, tôi không có bất kỳ vấn đề gì. – defaultNINJA

Xin lỗi, tôi nên giải thích. Vấn đề mà anh ta gặp phải là khi bạn gõ một cái gì đó vào trường đầu vào và sau đó _immediately_ nhấp vào một trong các liên kết (tức là trước khi tabbing ra khỏi 'input' hoặc nhấp vào bất cứ nơi nào khác trên trang) sự kiện' onclick' doesn ' t cháy (khi có một 'alert (...)' trong sự kiện 'onchange' của' input'). Mã của bạn dựa vào việc đã thay đổi tiêu điểm từ 'đầu vào' trước khi nhấp vào liên kết văn bản. (Có một cơ hội hành vi này không xảy ra trong trình duyệt của bạn ... Tôi đã thử nghiệm với FF một Chromium. ** Fix ** sẽ thay đổi thành 'onmousedown' (xem ở trên) – Steven

OK ... Vì vậy, có vẻ như đó là thời gian cho một chút giải thích.

Giải thích

Bạn gặp lỗi này vì sự kiện onchange được kích hoạt ngay sau khi tập trung được chuyển đi từ nguyên tố này. Trong ví dụ của bạn, hành động tách biệt ra khỏi phần tử input là sự kiện mousedown kích hoạt khi bạn nhấp chuột vào chuột. Điều này có nghĩa là khi bạn mousedown trên liên kết, nó sẽ tắt chức năng onchange và bật cảnh báo.

Các onclick kiện mặt khác được kích hoạt trên mouseup sự kiện (ví dụ: khi bạn phát hành áp lực trên chuột - chứng minh này cho chính mình bằng cách click, hold/pause, release trên một sự kiện onlcick). Quay lại tình huống của bạn ... Trước mouseup (tức làonclick) xảy ra tiêu điểm được di chuyển đến alert được kích hoạt từ chức năng onchange của bạn.

Fix

Có một vài tùy chọn để sửa lỗi này. Thay đổi đơn giản nhất từ việc sử dụng onclick="...." đến onmousedown="....".

Ngoài ra, bạn có thể sử dụng setTimeout như ,:

function change() { 
    setTimeout(function(){ 
     alert("Change event") 
    }, 100) 
}

Tôi đề nghị phương pháp onmousedown như ưa thích. Phương pháp setTimeout sẽ không thành công nếu bạn nhấp và giữ trên liên kết nhiều hơn số tiền được chỉ định vào thời gian chờ.

Nguồn

2013-07-16 21:54:48 Steven

sự kiện onclick không kích hoạt sau sự kiện onchange

Trả lời

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