Flex - Избегайте события щелчка на контейнере при нажатии на вложенный компонент - PullRequest
Новая
       22

Flex - Избегайте события щелчка на контейнере при нажатии на вложенный компонент

4 голосов
/ 26 сентября 2008

У меня есть приложение Flex, где я использую Canvas, чтобы содержать несколько других компонентов. На этом холсте есть кнопка, которая используется для вызова определенного потока через систему. Нажатие в любом месте на холсте должно привести к появлению панели сведений, показывающей дополнительную информацию о записи, представленной этим элементом управления.

Проблема, с которой я столкнулся, заключается в том, что, поскольку кнопка находится внутри Canvas, каждый раз, когда пользователь нажимает кнопку, событие click запускается как для кнопки, так и для Canvas. Есть ли способ избежать возникновения события click для объекта 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>

Когда вы нажимаете на кнопку, в текстовом поле отображаются две записи: «Нажатие кнопки» и «Нажатие на холст», даже если щелкнуть мышью только один раз.

Я хотел бы найти способ, которым я мог бы избежать создания второй записи, чтобы при нажатии на кнопку создавалась только запись «Нажатие кнопки», но если бы я щелкал где-либо еще в Canvas, « Запись Canvas Clicked все равно будет отображаться.

Ответы [ 3 ]

7 голосов
/ 26 сентября 2008

Событие продолжается, потому что для event.bubbles задано значение true. Это означает, что все в отображении heirarchy получает событие. Чтобы остановить продолжение мероприятия, вы звоните 

event.stopImmediatePropagation()
1 голос
/ 26 сентября 2008

Ответ Лапли сработал как шарм. Для интересующихся обновленный код выглядит так: 

<?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.

0 голосов
/ 26 сентября 2008

У меня есть 2 идеи, сначала попробуйте это: 


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

если это не сработает, посмотрите, можете ли вы добавить слушатель щелчка на холст, а не кнопку, и проверьте свойство target объекта события. что-то вроде: 


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

Опять же, вот некоторые идеи на моей голове ... Я создам небольшое тестовое приложение и посмотрю, работают ли они ...

...