Question

我在“li”元素中有一个按钮。单击“li”元素时会执行请求，单击该按钮会执行另一个请求。

    <li style="cursor: pointer; padding-bottom: 2px;" class="list-group-item"  ng-class="{'active': $index === selectedIndex}" ng-click="showQuery(segname.id, $index, segname)" ng-repeat="segname in segmentsCreatedName">
     <span style="padding: 10px 15px; display: inline-block;">{{segname.name}}</span>
     <a class="btn btn-default pull-right" href="/apps/{{currApp}}/messages/automate/segments/{{segname.id}}/write">AutoMessage</a>
    </li>

我想从<li>中删除按钮，以便在单击按钮时只发出一个请求。我有什么方法可以做到吗？

Answer 1

你有两种选择之一。

第一个选项是停止点击链接。

第二个选项是在调用函数之前检查点击的内容。

基本理念

<强> HTML：

<div id="x">xxx<a href="#">aaa</a></div>

<强> JavaScript的：

document.getElementById("x").onclick = function (e) {  //better to use addEventListener
   e = e || window.event;
   var target = e.srcElement || e.target;
    if (target.tagName.toLowerCase()!=="a") {
         alert("not the link");   
    }
};

JSFiddle

Answer 2

简而言之，你所描述的方式无法完成。

只要您希望通过单击<li>元素执行请求，您就不能同时将其链接并脱钩并执行操作。由于该按钮包含在<li>元素中，因此任何单击该按钮也会触发对该元素的单击。

你实际上试图通过一个按钮和一个可点击的<li>嵌套来实现什么？也许如果你添加了一些关于你想要实现的目标的更多信息，可以建议更好的解决方案。

从<li>元素</li>中删除按钮

2 个答案: