موجة Google: كيف جعلوا divs قابلة للنقر

Question

نظرًا لأننا نواجه مشكلات أداء GWT في تطبيق الهاتف المحمول ، فقد نظرت إلى رمز موجة Google نظرًا لأنه تم تطويره باستخدام GWT.

اعتقدت أن جميع الأزرار هناك موجودة ، ولكن إذا نظرت إلى HTML تم إنشاؤها مع Firebug سترى أي سمات onclick على divs قابلة للنقر. أتساءل كيف يحققون ذلك وجود عنصر يصدر أحداث النقر أو mousedown ويبدو أنه لا يجري عنصرًا ولا يتم حقنه مع سمة onclick.

من المؤكد أن القدرة على إنشاء مثل هذه المكونات ستأخذني خطوة واحدة إلى الأمام لتحسين الأداء.

شكرًا. ملاحظة: لم يكن Google ستقوم بفتح رمز العميل المصدر أيضًا. لم تتمكن من العثور عليه.

Answer 1

ال توثيق GWT يوضح كيفية إنشاء معالجات داخل تطبيق GWT Java:

public void anonClickHandlerExample() {
  Button b = new Button("Click Me");
  b.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      // handle the click event
    }
  });
}

سيؤدي ذلك إلى إنشاء عنصر HTML وربط معالج النقر به. ومع ذلك ، في الممارسة العملية ، فإن هذا له نفس النتيجة التي تستخدمها document.getElementById('element').onclick() على عنصر موجود في صفحتك.

Answer 2

ليس عليك وضع onclick سمة على HTML لجعلها لديها معالج onclick. هذا مثال بسيط للغاية:

<div id="mydiv">Regular old div</div>

ثم في السيناريو:

document.getElementById('mydiv').onclick = function() { 
    alert('hello!');
}

لن يقوموا بتعيين خاصية OnClick مباشرة ، وكان من الممكن تعيينها في رمز GWT أو عبر مكتبة JavaScript أخرى.

Answer 3

يمكنك ربط الوظائف إلى onclick حدث باستخدام JavaScript. إليك مثال باستخدام jQuery:

$(document).ready(function(){
    $("#div-id").click(function(){
        /* Do something */
    });
});

Answer 4

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

Answer 5

يتم إنشاء حدث نقرة لكل عنصر DOM داخل الجسم. ينتقل الحدث من الجسم إلى العنصر الذي تم النقر عليه (ما لم تكن تستخدم Internet Explorer) ، ويضرب العنصر الذي تم النقر عليه ، ثم الفقاعات احتياطيًا. يمكن التقاط الحدث إما من خلال سمات عنصر DOM ، أو معالجات الأحداث في JavaScript ، أو السمات في أي من مستويات الوالدين (الحدث الفقاعي أو التقاط هذا يحفز هذا).

Answer 6

أتصور أنهم فقط وضعوه في ملف .js. تم القيام به بسهولة مع قول jQuery مع $ (وثيقة) .READY () على سبيل المثال.