Unable restrict the click event listener outside region of LeftNavButton and RightNavButton?

Question

I am created one sample alloy app in appcelerator studio. When I click on outside button(image) also event is performed. How to restrict the click event, If I perform event outside the LeftNavButton or RightNavButton. Can one help me out.

signIn.js:

$.signInWin.addEventListener('open', function() {

        Ti.API.info('signInWin open');

        var titleLabel = Ti.UI.createLabel({ text: 'Log In', width: Ti.UI.SIZE});
        $.signInWin.setTitleControl(titleLabel);

        var leftButton = Titanium.UI.createButton({
            backgroundImage : '/left_arrow.png'
        });
        $.signInWin.setLeftNavButton(leftButton);

        var rightButton = Titanium.UI.createButton({
            backgroundImage : '/right_arrow.png'
        });
        $.signInWin.setRightNavButton(rightButton);

        leftButton.addEventListener('click', function(e) {
            Ti.API.info(' event performed on left button');

        });

        rightButton.addEventListener('click', function(e) {
            Ti.API.info(' event performed on right button');

        });
});

signIn.tss:

"#signInWin":{
    backgroundColor: '#ffffff',

}
"#signInNav":{
    backgroundColor: '#00a2f7',

}

signIn.xml:

<Alloy>
    <NavigationWindow id="signInNav" platform="ios">
        <Window id="signInWin">

        </Window> 
    </NavigationWindow>
</Alloy>

Sample Screen View

Answer 1

The clickable area of a rightNavButton/leftNavButton extends the button itself by a few pixels. That is a native behavior of iOS. To resolve this, you could wrap the button inside a Ti.UI.View which has a fixed height. That should resolve your problem pretty easy!