زر جافا سكريبت انقر فوق + كشف

Question

لدي زر أحمر كبير وأحاول استخدام جافا سكريبت لتنفيذ ما يلي:-

1. يقوم OnMouseDown بتغيير الصورة بحيث يبدو الزر مضغوطًا
2. يعود OnMouseUp إلى الصورة الأولية ويكشف عن قسم مخفي

يمكنني تشغيل جزء تغييرات الصورة onMouse Down وonMouseUp.

يمكنني أيضًا الكشف عن القسم المخفي باستخدام OnClick

المشكلة هي أنني لا أستطيع أن أجعل كل شيء يعمل معًا.

كيف أقوم بهذا العمل؟

راجع للشغل، أنا متأكد من أن هذا واضح، لكنني جديد إلى حد ما على جافا سكريبت، لذلك أقدر مساعدتك

Answer 1

يمكنك استخدام الفواصل المنقوطة لفصل عبارات البرنامج النصي المتعددة في حدث ما:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed(); revealDiv();" />

وأعتقد أيضًا أن معظم المتصفحات تدعم حدث onclick:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed();"
  onclick="revealDiv();" />

نظرًا لأنك قلت أنك قد اكتشفت بالفعل كل جزء من الأجزاء الثلاثة بشكل منفصل، فقد كتبت للتو استدعاءات وظيفية يمكنك استبدالها بالرمز الخاص بك لكل خطوة.

Answer 2

دون رؤية الكود الخاص بك ، من الصعب القول ، لكني أشك في "عودة صواب" مفقودة ؛ بيان في نهاية معالجات أحداث OnClick أو OnMouseup.

Answer 3

لا يُنصح أبدًا بإرفاق الأحداث بالعناصر باستخدام تدوين السمة مباشرة إلى علامة عنصر html.

إنها ممارسة أفضل بكثير لفصل العرض (كونه html المعروض) عن وحدة التحكم (الإجراءات التي تحدث)

أفضل طريقة لإرفاق حدث هي كما يلي:

<img id="abut" />

<script>
var thebutton = document.getElementById('abut'); //Retrieve the button from the page 
thebutton.onmousedown = depressed; //depressed is a function that you declare earlier on...here, you are just passing a reference to it
thebutton.onmouseup = function () {
    undepressed();
    revealDiv(); //Invoke the two functions when the 'onmouseup' is triggered'
};
</script>