是什么区别 event.bubbles,以false对任何事件,并设置event.stopPropagation()或stopImmediatePropagation()同时处理事件?
我正在使用Flex4和AS3.
如何防止滚动冒泡?
以下示例不起作用:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Bubbling</title>
<style>
#menu {
width: 80px;
height: 150px;
background: red;
overflow: auto;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function isScrollOnBound( scrollContainer ) {
if ( $( scrollContainer ).scrollTop() === 0 ||
$( scrollContainer ).scrollTop() + $( scrollContainer ).innerHeight() >= $( scrollContainer )[0].scrollHeight ) {
return true;
} else {
return false;
}
}
$(function() {
$( '#menu' ).on( 'scroll', function(e) {
if ( isScrollOnBound( this ) ) {
e.stopPropagation();
}
});
$( …Run Code Online (Sandbox Code Playgroud) 我的程序非常大,并且使用WPF,我希望有一个使用'R'的全局快捷键,没有修饰符.
有许多控件,如TextBox,ListBox,ComboBox等,都在控件内部使用字母,这很好 - 这对我来说是正确的.
但是 - 我希望保持KeyDown事件不会冒泡到主窗口,例如,当用户在TextBox中键入字母'R'时,它会触发快捷方式.
理想情况下,我希望能够做到这一点,而无需指定(并执行if-then逻辑)每个实例/控件类型可能接收正常的字母键按压(不仅仅是TextBox控件,尽管他们是最严重的违规者) ).
我有这样一个HTML:
<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li>
Run Code Online (Sandbox Code Playgroud)
要在单击锚点时处理AJAX请求,我在click事件上注册了处理程序:
$('.addToFriends a').click(function(event){
var target = $(event.target);
if (target.is('a')) {
// if I click on SPAN element following fragment won't execute!
// do ajax request
}
event.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
我的问题是:
所以现在,我解决了这个问题,我的解决方案是:
$('.addToFriends a').click(function(event){
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
...
});
Run Code Online (Sandbox Code Playgroud)
但是,我很好奇为什么它会像这样......
谢谢,
帕维尔
使用jQuery:使用以下代码我想阻止href url(在这种情况下是一个哈希'#')在点击时被触发,但仍然允许click事件继续冒泡链.怎么能实现呢?
<div>
<a href="#">Test</a>
</div>
$('a').click(function(e){
// stop a.click firing but allow click event to continue bubbling?
});
Run Code Online (Sandbox Code Playgroud) 如何获得两个不相关的控件来引发相同的自定义事件?到目前为止,我看到的所有示例都在一个控件中定义了一个事件,我应该采用不同的方法吗?
例如.我想从OnFocus处理程序为按钮和文本框引发自定义冒泡事件.
我有一个下拉功能,只需点击这个div即可调用
<div (click)="toggleDropdown($event)" data-id="userDropdown">
Username <i class="mdi mdi-chevron-down"></i>
</div>
Run Code Online (Sandbox Code Playgroud)
但是当我单击<i>元素时,不会触发click事件
toggleDropdown($event) {
const id = $event.target;
document.querySelector('[data-drop=' + id.getAttribute('data-id') + ']').classList.toggle('active');
}
Run Code Online (Sandbox Code Playgroud)
无论如何,我可以让孩子点击事件触发父母一个?
我在div中输入了文本。单击输入应将其设置为焦点并停止div click事件的冒泡。我尝试了stopPropagationand preventDefault在文本输入事件上,但无济于事。控制台日志显示div单击仍然执行。如何停止div点击事件的执行?
// html
<div (click)="divClick()" >
<mat-card mat-ripple>
<mat-card-header>
<mat-card-title>
<div style="width: 100px">
<input #inputBox matInput (mousedown)="fireEvent($event)" max-width="12" />
</div>
</mat-card-title>
</mat-card-header>
</mat-card>
</div>
// component
@ViewChild('inputBox') inputBox: ElementRef;
divClick() {
console.log('click inside div');
}
fireEvent(e) {
this.inputBox.nativeElement.focus();
e.stopPropagation();
e.preventDefault();
console.log('click inside input');
return false;
}
Run Code Online (Sandbox Code Playgroud) event-bubbling ×10
events ×4
jquery ×3
javascript ×2
wpf ×2
angular ×1
angular7 ×1
apache-flex ×1
c# ×1
click ×1
css ×1
knockout.js ×1
onclick ×1
scroll ×1
typescript ×1