لماذا يعمل رمز النموذج الأولي هذا مثل هذا؟

Question

هذا هو HTML الخاص بي:

(ملاحظة: لم أستخدم صورة خلفية على A فقط من أجل البساطة لإظهار شخص ما كيف يمكن أن يعمل هذا)

<div class="foo">
    <ul>
        <li><a href="#" class="bar"><img src="bar.gif" /></a></li>
        <li><a href="#" class="baz"><img src="baz.gif" /></a></li>
    </ul>
</div>

و javaScript الخاص بي:

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $$('.foo a').each(function(a) {
            alert(a); // this is the anchor
            a.observe('click', fooClick);
    });

    function fooClick(event) {
        alert(event.element()); // this is the img
    }
</script>

لماذا العنصر في Fooclick الصورة وليس المرساة؟ كيف يجب أن أفعل هذا لاستخدام الصورة.

Answer 1

بينما يرتبط معالج النقر بالمرساة ، يتم رفع حدث النقر على الصورة. يتم استدعاء الحدث فقاعات DOM ويتم استدعاء معالج الأحداث على المرساة. event.element() هو العنصر الذي أثير عليه الحدث

Answer 2

مرتبك إلى حد ما في سؤالك ، "لماذا العنصر في الصورة في الصورة وليس المرساة؟ كيف يجب أن أفعل هذا لاستخدام الصورة."

هل تقصد "مرساة" في الجملة الأخيرة؟ إذا كان الأمر كذلك ، فإن Event.Element () هو العنصر الفعلي الذي تم النقر عليه ، وليس بالضرورة العنصر الذي تم تعيين المعالج له. إذا كنت بحاجة إلى المرساة ، يمكنك فقط القيام بشيء مثل ALERT (event.element (). UP ('A')).

Answer 3

إذا كنت ستستخدم الصور كخلفية ، فيجب أن تحصل على مرساة كحدث. أعتقد أن Event.Element () هو نفس الحدث. المستهدف وهذا عنصر تلقى حدثًا أولاً ويتم من هذا الحدث فقاعة DOM. لذا ، قم بإزالة (انقله إلى CSS/صورة الخلفية) أو تحقق من الوالد ().