ion-nav-barのボタンのクリック可能領域を増やす

Question

私はnavbarでイオンアプリを持っています。このナビゲーションバーには触れるのが少し難しいボタンがあります。だから私はボタンのタッチ領域を増やしたいと思う。私はこれを試してみました：あまりにも、ボタンを正確にクリックするとtest()が呼び出されたとき

<ion-nav-bar class="bar bar-stable background-main-color" align-title="center"> 
<ion-nav-buttons side="primary"> 
    <div class="navbarIconArea" ng-click="test2()"> 
    <button class="button searchIcon background-main-color icon-color" ng-click="test()"></button> 
    </div> 
</ion-nav-buttons> 
[...] 
</ion-nav-bar> 

しかしtest2()はちょうどと呼ばれています。 divはion-nav-barの外にあるときに機能します。

この問題を解決するにはどうすればいいですか、それ以外の方法で領域を増やす方法はありますか？

CSS（単なるテストには50px、10pxのになります）：

.navbarIconArea { 
    padding-right: 50px; 
    padding-left: 50px; 
    padding-top: 2px; 
    display: inline-block; 
} 

EDIT：

問題は、ボタンをクリックしたときに、私の両方の関数が呼び出されることはありません。その周辺の領域をクリックするとtest2()が呼び出されないことです。

Answer 1

ボタンdiv自体をリンクにする必要があります。 divタグをaタグ内にネストします。

<a href=#><div></div></a> 

Answer 2

私はあなたの問題から理解できるものは何ですか。 divにはbuttonがあり、ボタンをクリックするときにのみtest()を呼び出し、divをクリックしたときにのみtest2()を呼び出すとします。今あなたの問題は、これまでボタンをクリックするとdivもクリックされることです。実際はこれが期待される動作です。ボタンはdiv内にあり、ボタンをクリックすると実際にdivもクリックしています。したがって、ボタンをクリックすると、のクリックと同じことができます。したがって、両方の機能が実行されています。

解決策は、ボタンとdivの間に十分なマージンを与えます。したがって、このCSS、button.searchIcon{margin:20px}を使用すると、ボタンとdivの間に20pxのスペースが設定されます。

だからの問題が修正されました。click around the button and it will be a div clickです。

もう1つの問題があります。ボタンをクリックしてもdivがクリックされているので、ボタンのng-clickを削除するのが解決策です。ここでdivをクリックするだけで、このdiv内をクリックすると、クリックが発生したかどうかがわかります（例jqueryタグを追加していないので、jqueryでチェックすることができます）、ボタンがクリックされていたら、実行しないでくださいtest2()test()を実行します。それ以外の場合は、test2()を実行してください。したがって、これには、このロジックと通話のトグルを歪める新しい機能が必要になります。 divのng-clickにこの新しい関数をポイントします。