# HitTestMode. Stop click propagation

**URL:** <https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843>\
**Category:** How-to Discussions\
**Created:** [September 19, 2017, 2:29pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843 "2017-09-19T14:29:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [September 19, 2017, 2:29pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/1 "2017-09-19T14:29:44Z")

</div>

I did read some [posts](https://www.fusetools.com/community/forums/howto_discussions/hittestmode_to_hit_just_the_top_panel?page=1&highlight=cfc5e5a9-9273-4b2e-8c2d-2a2c1c1e64d5#post-cfc5e5a9-9273-4b2e-8c2d-2a2c1c1e64d5) that talked about this and the `HitTestMode` docs too, but I still can’t solve the problem with the following code.

This is a class that I use in a number of pages that shows some icons with which the user may send mails, share content, etc.

```
<Panel ux:Class="Icons" > 
    <DockPanel Alignment="Right" Margin="0,0,10,0">
        <Image File="Assets/envelope.png" Dock="Left" Width="18">
        	<Clicked>
        		<LaunchEmail To="" Subject="{title}" CarbonCopy="" BlindCarbonCopy="" Message="{email_msg}" />
    		</Clicked>
        </Image>
        <Image File="Assets/phone-call.png" Dock="Left" Width="18" Margin="10,0,0,0" />
        <Image File="Assets/share-1.png" Dock="Left" Width="18" Margin="10,0,0,0">
        	<Clicked Handler="{clickShare}"/>
        </Image>
        <Image File="Assets/unlink.png" Dock="Left" Width="18" Margin="10,0,0,0" />
        <Image File="Assets/placeholder.png" Dock="Left" Width="18" Margin="10,0,0,0" />
    </DockPanel>
</Panel>

```

The two `Clicked` work fine. They launch the e-Mail and the Share modules but as soon as the user has finished writing the mail or sharing the content (or simply as he cancel the operation) the `click` will propagate and the interaction will continue to the page that hosts this class.

I understand that I have to put a panel behind that blocks all other interactions, but I did not find the correct place where to put it:

First try:

```
<Panel ux:Class="Icons" > 
    <DockPanel>
         [...]
    </DockPanel>
    <Panel HitTestMode="None" />
</Panel>

```

Second try:

```
<Panel ux:Class="Icons" >
    <Panel>
        <DockPanel>
             [...]
        </DockPanel>
    </Panel>
    <Panel HitTestMode="None" />
</Panel>

```

Third try:

```
<Panel>
   <Image File="Assets/share-1.png" Dock="Left" Width="18" Margin="10,0,0,0">
       <Clicked Handler="{clickShare}"/>
   </Image>
<Panel>
<Panel HitTestMode="None" />
```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [September 20, 2017, 12:17pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/2 "2017-09-20T12:17:49Z")

</div>

Would you be able to prepare a complete, ready-to-run example that we could check? It’s hard to understand the challenge without being able to _see_ what’s wrong.

As for `HitTestMode`, setting it to `None` means that all clicks will go right through the element. For a Panel that should consume all clicks and not pass anything through, you’re after `HitTestMode="LocalBounds"` instead.

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [October 10, 2017, 9:20am UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/3 "2017-10-10T09:20:58Z")

</div>

In the past days I tried my best before asking again help, but I did not manage to work it out. Below there’s a stripped out version of the app I’m willing to build.

The problem is that any click on the `share` text inside the `<Icons>` panel goes through the panel itself and clicks the `<NewsItem>` outputting the `<DebugAction>` message. I would like that when `share` is clicked the click stops there.

```
<App>
<JavaScript>

    var Observable = require("FuseJS/Observable");
    var email = require('FuseJS/Email');
    var share = require("FuseJS/Share");

    var data = Observable();

    var json = {
        "events": [
            {

                items: [
                    {
                        "title": "Live. Faucibus dignissim parturient.",
                        "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium."    
                    },
                    {
                        "title": "Live. Taciti ante scelerisque consequat.",
                        "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."   
                    },
                    {
                        "title": "Dance. Condimentum adipiscing leo.",
                        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus."       
                    },
                    {
                        "title": "Party. Ut vestibulum tincidunt consectetur.",
                        "description": "Ut enim ad minima veniam, quis nostrum exercitationem."       
                    },
                    {
                        "title": "Party. Parturient mi urna commodo.",
                        "description": "Quis autem vel eum iure reprehenderit qui in ea."   
                    },
                    {
                        "title": "Party. Pharetra pretium nisl felis.",
                        "description": "Et harum quidem rerum facilis est et expedita distinctio."   
                    }
                ]
            }
        ]
    };
    

    data.replaceAll(json.events);

    module.exports = {
        data: data,
        clickShare: clickShare
    };

	function clickShare(args) {
        share.shareText(args.data.title);
    }	

</JavaScript>

<ScrollView Margin="0,0,0,0">
    <StackPanel ItemSpacing="6" >
        <Each Items="{data.items}">
            <NewsItem />
        </Each>
    </StackPanel>
</ScrollView>

<Panel ux:Class="NewsItem">
    <StackPanel Margin="6,0,6,0">
        <Clicked>
            <DebugAction Message="This should not appear when 'share' is clicked." />
        </Clicked>
            
        <StackPanel Margin="6,6,0,0">
            <Text Value="{title}" Alignment="Left" FontSize="16" />
            <Text Value="{description}" Alignment="Left" FontSize="16" />

            <Icons Dock="Bottom" Margin="0,0,0,6" />  

        </StackPanel>

        <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </StackPanel>
</Panel>

<Panel ux:Class="Icons" > 
    <DockPanel Alignment="Right" Margin="0,0,10,0">
        <DockPanel Dock="Right" Padding="8,2,8,2">
            <Text Value="share" Color="#ED1C24">
                <Clicked Handler="{clickShare}"/>
            </Text>
        </DockPanel>
    </DockPanel>
</Panel>

</App>
```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 10, 2017, 9:41am UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/4 "2017-10-10T09:41:33Z")

</div>

Thanks for taking the time to make a reproduction!

All you want to do is move the `Clicked` on the parent to somewhere deeper in the tree. There, I fixed it for you:

```auto
<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var email = require('FuseJS/Email');
    var share = require("FuseJS/Share");
    var data = Observable();
    var json = {
        "events": [
            {

                items: [
                    {
                        "title": "Live. Faucibus dignissim parturient.",
                        "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium."    
                    },
                    {
                        "title": "Live. Taciti ante scelerisque consequat.",
                        "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."   
                    },
                    {
                        "title": "Dance. Condimentum adipiscing leo.",
                        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus."       
                    },
                    {
                        "title": "Party. Ut vestibulum tincidunt consectetur.",
                        "description": "Ut enim ad minima veniam, quis nostrum exercitationem."       
                    },
                    {
                        "title": "Party. Parturient mi urna commodo.",
                        "description": "Quis autem vel eum iure reprehenderit qui in ea."   
                    },
                    {
                        "title": "Party. Pharetra pretium nisl felis.",
                        "description": "Et harum quidem rerum facilis est et expedita distinctio."   
                    }
                ]
            }
        ]
    };
    data.replaceAll(json.events);

    function clickShare(args) {
        console.log("Share was clicked");
        share.shareText(args.data.title);
    }

    module.exports = {
        data: data,
        clickShare: clickShare
    };
    </JavaScript>

    <ScrollView Margin="6">
        <StackPanel ItemSpacing="6" >
            <Each Items="{data.items}">
                <NewsItem />
            </Each>
        </StackPanel>
    </ScrollView>

    <Panel ux:Class="NewsItem">
        <DockPanel Margin="6">
            <Icons Dock="Bottom" />
            <StackPanel>
                <Clicked>
                    <DebugAction Message="This should not appear when 'share' is clicked." />
                </Clicked>
                <Text Value="{title}" Alignment="Left" FontSize="16" />
                <Text Value="{description}" Alignment="Left" FontSize="16" />
            </StackPanel>
        </DockPanel>

        <Rectangle Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </Panel>

    <Panel ux:Class="Icons"> 
        <DockPanel Alignment="Right" Margin="0,0,10,0">
            <DockPanel Dock="Right" Padding="8,2">
                <Clicked Handler="{clickShare}" />
                <Text Value="share" Color="#ED1C24" />
            </DockPanel>
        </DockPanel>
    </Panel>

</App>

```

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [October 10, 2017, 1:12pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/5 "2017-10-10T13:12:23Z")

</div>

Sorry Uldis, my fault. I understood your suggestion but stripping out the code from my app I over simplified it. The design of the `NewsItem` class is a bit more complicated.

```
<Panel ux:Class="NewsItem">
<StackPanel Margin="6,0,6,0">
    <Clicked>
        <DebugAction Message="Ok! You did not clicked 'share'." />
    </Clicked>
    <StackPanel>                    
        <Rectangle Color="#fff" Height="80">
            <Stroke Color="#E6E6E6" Width="1" />
            <Text Value="image" Alignment="Center" FontSize="13" />
        </Rectangle>
        <DockPanel>
            <StackPanel Dock="Left">
                 <Rectangle Width="80" Height="100" Margin="6,6,0,6">
                     <Stroke Width="1" Color="#CDCDCD" />
                     <StackPanel Alignment="Center">
                          <Text Value="numbers" Alignment="Center" FontSize="13" />
                     </StackPanel>
                 </Rectangle>
             </StackPanel> 
             <StackPanel Margin="6,6,0,0">
                 <Text Value="{title}" TextTruncation="Standard" Alignment="Left" FontSize="16" Margin="0,0,6,0"/>
                 <Text Value="{description}" Alignment="Left" FontSize="13" Margin="0,0,6,0" />
              </StackPanel>
              <Icons Dock="Bottom" Margin="0,0,0,6"/>  
        </DockPanel>
    </StackPanel>
    <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
        <Stroke Color="#E6E6E6" Width="1" />
        <Shadow Size="2" Distance="2" Color="#C4C4C4" />
    </Rectangle>
</StackPanel>
</Panel>

```

When previewed you will notice that the `share` button is aligned at the bottom with the rectangle on the left.

Thank you for the patience.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 10, 2017, 1:22pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/6 "2017-10-10T13:22:16Z")

</div>

The complexity of the component does not make any difference. You still need to simply put the `Clicked` in the right place.

If necessary, you can put multiple `Clicked` with the same callback on a number of different elements (image, title, description, …).

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [October 10, 2017, 3:31pm UTC](https://forums.fusetools.com/t/hittestmode-stop-click-propagation/6843/7 "2017-10-10T15:31:40Z")

</div>

Ok. Done!  
If someone happens in this post this is how I solved it:

```
<Panel ux:Class="NewsItem">
    <StackPanel Margin="6,0,6,0">
        <StackPanel>                    
            <Panel Height="80" HitTestMode="LocalBounds">
                <Text Value="image" Alignment="Center" FontSize="13" />
                <Clicked>
                    <DebugAction Message="Ok! You did not clicked 'share'." />
                </Clicked>
            </Panel>
            <DockPanel Color="#FFF">
                <StackPanel Dock="Left">
                    <Rectangle Width="80" Height="100" Margin="6,6,0,6" Color="#fff">
                        <Stroke Width="1" Color="#CDCDCD" />
                        <StackPanel Alignment="Center">
                            <Text Value="numbers" Alignment="Center" FontSize="13" />
                        </StackPanel>
                          <Clicked>
                            <DebugAction Message="Ok! You did not clicked 'share'." />
                        </Clicked>
                    </Rectangle>
                </StackPanel> 
                <StackPanel Margin="6,6,0,0" HitTestMode="LocalBounds">
                    <Text Value="{title}" TextTruncation="Standard" Alignment="Left" FontSize="16" Margin="0,0,6,0"/>
                    <Text Value="{description}" Alignment="Left" FontSize="13" Margin="0,0,6,0" />
                    <Clicked>
                        <DebugAction Message="Ok! You did not clicked 'share'." />
                    </Clicked>
                </StackPanel>
                <Icons Dock="Bottom" Margin="0,0,0,6"/>  
            </DockPanel>
        </StackPanel>
        <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </StackPanel>
</Panel>
```