Html 按钮内部跨距未注册单击

我有一个简单的按钮，里面有一个跨度，它的类是一些boostrap图标。 没什么大不了的

<button ng-click="ctrl.toggleMenuDropDown()" class="  cornerMenuButton menuButton">
                    <span class="fa fa-reorder"></span>
                    Menu
</button>

菜单

问题是跨度零件没有注册单击。单击图标所在的“渲染”按钮时，单击未注册。我不知道为什么，也不知道是什么原因造成的

但是，当我添加停止传播按钮时，一切正常。像这样：

<button ng-click="ctrl.toggleMenuDropDown(); $event.stopPropagation()" class="  cornerMenuButton menuButton">
                    <span class="fa fa-reorder"></span>
                    Menu
</button> 

菜单

---

它很好用。为什么呢

试试这个……将z-index添加到我的跨度中，结果很好

.reorder{
  .fa {
    position: relative;
    z-index: 1;
  }
  span {
    position: relative;
    z-index: 1;
  }
}

---

试试这个…在我的跨度中添加了z-索引，结果很好

.reorder{
  .fa {
    position: relative;
    z-index: 1;
  }
  span {
    position: relative;
    z-index: 1;
  }
}

---

很难知道为什么在按钮元素中使用span

但是澄清你的问题

您还需要在span元素上添加

ng click

。如果您只希望span ng click工作，则需要将

事件。stopPropagation（

）添加到将事件传递给此函数的toggleMenuDropDown（事件）函数中

伊夫特·斯托普罗加皮翁的定义是

方法的作用是：停止将事件冒泡到 父元素，防止任何父事件处理程序 执行。提示：使用event.isPropagationStopped（）方法检查 是否为事件调用此方法

$（“#但是”）。单击（函数（事件）{
event.stopPropagation（）；
});
$（“#foo”）。单击（函数（）{
警报（“父单击事件已触发！”）；
});

按钮
很难知道为什么在按钮元素中使用span

但是澄清你的问题

您还需要在span元素上添加
ng click
。如果您只希望span ng click工作，则需要将
事件。stopPropagation（
）添加到将事件传递给此函数的toggleMenuDropDown（事件）函数中

伊夫特·斯托普罗加皮翁的定义是

方法的作用是：停止将事件冒泡到
父元素，防止任何父事件处理程序
执行。提示：使用event.isPropagationStopped（）方法检查
是否为事件调用此方法


$（“#但是”）。单击（函数（事件）{
event.stopPropagation（）；
});
$（“#foo”）。单击（函数（）{
警报（“父单击事件已触发！”）；
});

按钮
请提供a。请提供a。这是一个有趣的解决方案：D。但我很好奇为什么span没有注册点击。是事件冒泡发生还是事件捕获？为什么停止按钮上的传播是可行的？图标和跨度需要设置z索引的位置才能产生任何效果。这是一个有趣的解决方案：D。但我很好奇为什么跨度没有记录点击。是事件冒泡发生还是事件捕获？为什么停止按钮上的传播是可行的？图标和跨距需要为z索引设置位置才能产生任何效果。可能跨距不是最佳选项，但我使用它只是为了有一个元素将图标CSS类添加到按钮内部。出于风格等原因。如果泡沫正在发生，那么我认为它应该在默认情况下起作用。为什么在按钮处停止事件会使事情变得正确？StopPropagation：简单地说，StopPropagation停止事件冒泡和事件捕获。什么是事件冒泡，事件冒泡的意思是，如果一个元素包含在另一个元素中，那么单击最里面的元素会启动一个从最里面的事件到外面的事件链，换句话说，事件会向外传播，事件捕获与事件冒泡正好相反，这意味着事件链开始从最上面的元素传播到最里面的元素。因此，要在span标记中使用ng click，您需要停止对按钮的复制，以便在span中使用ng click！为了更好地理解，我添加了spinnet。也许span不是最好的选择，但我使用它只是为了让我有一个元素来添加图标CSS类到按钮内部。出于风格等原因。如果泡沫正在发生，那么我认为它应该在默认情况下起作用。为什么在按钮处停止事件会使事情变得正确？StopPropagation：简单地说，StopPropagation停止事件冒泡和事件捕获。什么是事件冒泡，事件冒泡的意思是，如果一个元素包含在另一个元素中，那么单击最里面的元素会启动一个从最里面的事件到外面的事件链，换句话说，事件会向外传播，事件捕获与事件冒泡正好相反，这意味着事件链开始从最上面的元素传播到最里面的元素。因此，要在span标记中使用ng click，您需要停止对按钮的复制，以便在span中使用ng click！为了更好地理解，我添加了自旋网。