Bagaimanakah Saya Boleh Mengendalikan Peristiwa pada Elemen Input Dilumpuhkan dalam JavaScript?

Pengendalian Acara pada Elemen Input Dilumpuhkan

Telah diperhatikan bahawa elemen input yang dilumpuhkan tidak bertindak balas terhadap pengendalian acara standard dengan cara yang sama seperti unsur aktif. Ini boleh menghalang pembangunan fungsi tertentu dalam aplikasi web. Dalam artikel ini, kami akan meneroka kemungkinan penyelesaian untuk menangani isu ini dan menyediakan panduan komprehensif untuk pengendalian acara pada elemen input yang dilumpuhkan.

Masalah:

Apabila elemen input dilumpuhkan, ia biasanya tidak mencetuskan mana-mana pengendali acara apabila diklik atau berinteraksi dengannya. Ini boleh menimbulkan cabaran apabila cuba mendayakan atau berinteraksi dengan elemen sedemikian secara dinamik.

Penyelesaian 1:

Satu pendekatan untuk mengatasi had ini adalah dengan melampirkan pengendali acara pada elemen bekas input yang dilumpuhkan. Walaupun kebanyakan penyemak imbas menyebarkan acara daripada elemen yang dilumpuhkan ke atas pepohon DOM, membenarkan pengendalian acara dalam elemen induk, Firefox mempamerkan pengecualian kepada tingkah laku ini.

Penyelesaian 2:

Penyelesaian yang lebih mantap melibatkan meletakkan elemen di atas input yang dilumpuhkan supaya pengendali acara boleh didaftarkan pada elemen tindanan. Ini memastikan ketekalan merentas pelayar yang berbeza dan membolehkan kefungsian pengendalian acara yang diingini.

Pelaksanaan:

Untuk melaksanakan pendekatan tindanan, struktur HTML berikut boleh digunakan:

<div>
<p>Dan jQuery berikut kod:</p>
<pre class="brush:php;toolbar:false">$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Contoh:

Demonstrasi berkesan pendekatan ini boleh didapati di: http://jsfiddle.net/RXqAm/170/

Penyelesaian ini secara berkesan membolehkan pengendalian acara pada elemen input yang dilumpuhkan, memastikan keserasian merentas pelayar dan membolehkan dinamik interaksi dengan elemen sedemikian.