Flex - تجنب حدث النقر على الحاوية عند النقر فوق المكون المضمن

Question

لدي تطبيق Flex حيث أستخدم Canvas لاحتواء العديد من المكونات الأخرى.يوجد على تلك اللوحة القماشية زر يُستخدم لاستدعاء تدفق معين عبر النظام.من المفترض أن يؤدي النقر في أي مكان آخر على اللوحة القماشية إلى ظهور جزء تفاصيل يعرض المزيد من المعلومات حول السجل الذي يمثله عنصر التحكم هذا.

المشكلة التي أواجهها هي أنه نظرًا لوجود الزر داخل اللوحة القماشية في أي وقت ينقر فيه المستخدم على الزر، يتم تشغيل حدث النقر على كل من الزر واللوحة القماشية.هل هناك أي طريقة لتجنب تشغيل حدث النقر على كائن Canvas إذا قام المستخدم بالنقر فوق منطقة مغطاة بمكون آخر؟

لقد قمت بإنشاء تطبيق اختبار بسيط لتوضيح المشكلة:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            private function onCanvasClick(event:Event):void {
                text.text = text.text + "\n" + "Canvas Clicked";
            }

            private function onButtonClick(event:Event):void {
                text.text = text.text + "\n" + "Button Clicked";
            }
        ]]>
    </mx:Script>

    <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)">
        <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/>
    </mx:Canvas>
    <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/>
</mx:Application>

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

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

Answer 1

يستمر الحدث لأنه تم ضبط events.bubbles على القيمة true.هذا يعني أن كل شيء في التسلسل الهرمي للعرض يحصل على الحدث.لإيقاف استمرار الحدث، اتصل

event.stopImmediatePropagation()

Answer 2

كانت إجابة لابلي بمثابة السحر.بالنسبة للمهتمين، يبدو الكود المحدث كما يلي:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
                private function onCanvasClick(event:Event):void {
                        text.text = text.text + "\n" + "Canvas Clicked";
                }

                private function onButtonClick(event:Event):void {
                        text.text = text.text + "\n" + "Button Clicked";
                        event.stopImmediatePropagation();
                }
        ]]>
    </mx:Script>

    <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)">
        <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/>
    </mx:Canvas>
    <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/>
</mx:Application>

والفرق الوحيد هو السطر الإضافي الوحيد في طريقة onButtonClick.

Answer 3

لدي فكرتين، جرب هذا أولاً:

btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{
    event.stopImmediatePropagation();
    ...
});

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

btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{
    if(event.target == btn){
        ...
    }
    else{
        ...
    }
});

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