لماذا لا يطلق حدث Onchange على التغيير الأول؟

Question

شكرا لك على قضاء الوقت لقراءة سؤالي.

"المدى" input عنصر في HTML (شريط التمرير) يطلق النار onchange -هذا ، حيث محتوى أ span يتم تحديث العنصر بالقيمة الحالية لـ input عنصر.

بطريقة ما ، أول تغيير تم إجراؤه على input العنصر لا يطلق النار onchange حدث. عند استخدام حدث "onclick" ، فإنه يطلق النار.

إليك الرمز ، HTML أولاً:

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

والآن جافا سكريبت:

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

لقد خلقت أ JSfiddle, ، حتى تتمكن من تجربتها بنفسك.

لم أجد إجابة على هذا السؤال على Stackoverflow حتى الآن ، أي أسئلة وجدتها كانت حول onchange الحدث لا يطلق النار على الإطلاق. في هذه الحالة ، إنه التغيير الأول الذي لا يعمل فقط.

أتمنى أن يعرف أحد الجواب. أي مساعدة موضع تقدير كبير ، شكرا مقدما.

Answer 1

إذا فهمت السؤال بشكل صحيح ، فإن المشكلة هي أن تكون على Firefox ، onchange لا يتم تنفيذ المعالج عند الضغط على زر الماوس لأسفل عندما يكون المؤشر على زر التمرير ونقل الماوس. يتم تنفيذه فقط بعد إطلاق زر الماوس بعد هذه الخطوة.

يبدو أن هذا هو السلوك الصحيح (على الرغم من أن بعض المتصفحات الأخرى لا تمتثل) ، لأن HTML5 Cr يقول عن change حدث: "إذا لم يكن العنصر لا يحتوي على سلوك تنشيط محدد ولكنه يستخدم واجهة مستخدم تتضمن إجراءً لالتزام صريح ، فعندئذٍ يرتكب المستخدم تغييرًا في قيمة العنصر أو قائمة الملفات المحددة ، يجب على وكيل المستخدم قائمة انتظار المهمة اطرق حدثًا بسيطًا يدعى الفقاعات التي تسمى التغيير في عنصر الإدخال. "

هذا صياغة معقدة بعض الشيء ، ولكن يتبعها مثال توضيح: "مثال ثالث لواجهة المستخدم مع إجراء الالتزام سيكون ضوابط النطاق التي تستخدم شريط التمرير. بينما يقوم المستخدم بسحب مقبض التحكم ، ستطلق أحداث الإدخال كلما تغيرت الموضع ، في حين أن حدث التغيير لن يطلق النار إلا عندما يترك المستخدم المقبض ، والالتزام بقيمة محددة. "

الاستنتاج هو أنه في هذه الحالة ، يجب عليك استخدام oninput ميزة بدلا من onchange. في التمرين، onmousemove يعمل أيضًا ، لكن oninput من الأفضل ، لأنه من المتوقع أن يعمل مع أساليب الإدخال التي لا تستخدم الماوس (مهما كانت ، على سبيل المثال التحكم عن طريق الصوت).

Answer 2

في المستند الجاهز ، حاول تشغيل الحدث الذي يحدث يدويًا والذي لم يحدث تغيير لأول مرة.

لذا فقط أضف رمزًا أدناه:

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

Answer 3

خدعة صغيرة ، إذا لم تطلق onchange في المرة الأولى ، أضف:

onclick="console.log(1)"

بعض الإجراءات الأخرى على النقر ، لا يزال يطلق النار على أنها المرة الثانية ولكن كأول نقرة.