اليوم ، دعنا نسجل زر الماوس الأيمن لـ JS ونتحلل مبدأ التنفيذ أولاً:
1. حظر الحدث الافتراضي النقر بزر الماوس الأيمن ؛ (اعتقدت أن الحدث الافتراضي هو الحدث الافتراضي)
2. الاختباء من UL ؛ (اعتقدت ذات مرة أن هذا يستحق العرق ، العرق)
3. استجابة للنقر الأيمن للماوس وعرض UL المخفي ؛
4. بعد النقر على الماوس مرة أخرى ، يتم إخفاء UL مرة أخرى
من وجهة النظر هذه ، هل من الأسهل بكثير القيام به؟ أولاً ، ضع الرمز:
جزء HTML
<ul id = "testright"> <li> <a href = "#"> ابدأ </a> </li> <li> <A HREF = "#"
جزء JavaScript:
window.onload = function () {var forright = document.getElementById ("testright") ؛ // الحصول على الكائن ، والآن أنا على دراية بـ forright.style.display = "none" ؛ var title = forright.getElementSbyTagName ("li") ؛ لـ (var i = 0 ؛ i <title.length ؛ i ++) {title [i] .onmouseover = function () {this.className = "Active" ؛ // في الواقع ، يمكننا أيضًا تسمية الأحداث الأخرى هنا} ؛ العنوان [i] .onmouseout = function () {// هذا أيضًا حدثان من الماوس ، this.className = "" ؛ } ؛ } document.oncontextMenu = function (event) {// هذه هي النقطة الأساسية للتنفيذ var event = event || window.event ؛ // هذه ليست مشكلة forright.style.display = "block" ؛ forright.style.left = event.clientx+"px" ؛ forright.style.top = event.clienty+"px" ؛ // تراجع إحداثيات الماوس خطأ ؛ document.onclick = function () {// هو تقليد بشكل أكثر وضوحًا forright.style.display = "none" ؛ } ؛ } ؛دعنا نلقي نظرة أولاً على الجزء الأكثر أهمية من سجل اليوم: إذا كان الحدث المستند. OnContextMenu يعيد خطأ ، فهو لمنع الحدث الافتراضي. إذا لم نكتب أي شيء آخر ، فإننا نكتب عائدًا فقط في هذا الحدث ، كما لو كان الأمر التالي
document.oncontextMenu = function () {return false ؛ }وبهذه الطريقة ، لن يظهر أي رد إذا قمت بالنقر بزر الماوس الأيمن. ثم عد وانظر إلى تطبيق الحدث بأكمله. يبدو أنه باستثناء هذا الحدث ، فإن الباقي أكثر أحداثًا مألوفة ، لكن هذا النوع من دمج الأحداث يفتقر دائمًا إلى. المفتاح هو التفكير في الإبداع. ولكن بغض النظر عن مكان وجود الكثير ، دعنا نفعل ذلك أولاً ، لكنني أريد قراءة ثلاثة آلاف قصيدة بعناية ، ولا أريد أن أكتبها وأطلب فقط. موقف الحصان ، موقف الحصان ، موقف الحصان ...