Question

我有一个带导航栏的Ionic应用程序。在这个导航栏中有一些触摸有点不好的按钮。所以我想增加按钮的触摸区域。我试过这个：

<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()时，才会调用test()。 div在ion-nav-bar之外时会起作用。

知道如何解决这个问题或者如何增加面积？

CSS（50px只是为了测试，将是10px）：

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

编辑：

问题不在于我在单击按钮时调用了这两个函数。点击周围区域时不会调用test2()。

Answer 1

我能从你的问题中理解的是。您的div有一个button，并且您只想在点击按钮时调用函数test()，并且仅在单击div时调用test2()。现在你的问题是，当你点击按钮时，div也被点击了。实际上这是预期的行为。按钮位于div内部，当您单击按钮时，您实际上也是单击div。所以点击按钮也等于div的点击。所以你的两个函数都被执行了。

解决方案是在按钮和div之间留出足够的余量。因此，使用此CSS button.searchIcon{margin:20px}，这将在按钮和div之间设置20px空间。

现在修复了一个问题，您可以click around the button and it will be a div click。

现在还存在另一个问题。即使你单击按钮，单击div，所以解决方案是删除按钮上的ng-click，所以现在你只需要点击div，所以在这个div中单击你所做的是看是否单击是否发生在按钮上（因为你没有添加jquery标签我没有给你任何示例代码，你可以在jquery中检查它），如果单击是按钮然后不执行test2()执行{{1 }}。否则如果它不在按钮上执行test()。所以这将需要一个新函数，它将扭曲这个逻辑和切换调用。并指向div的test2()中的这个新函数。

Answer 2

您需要将按钮div本身设为链接。将div标记嵌套在标记中。

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

增加离子导航栏中按钮的可点击区域

2 个答案: