我正在努力学习如何使用Aurelia框架.这样做,我读的文档在这里对他们的结合事件的方法.文档建议默认使用委托.我已经在他们的一篇博客文章中提供了他们提供的插件,并添加了一点.完整的插件就在这里.
app.html
<template>
<input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
<input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />
<button type="button" click.delegate="showAlert()">delegate()</button>
<button type="button" click.trigger="showAlert()">trigger()</button>
</template>
app.js
export class App {
showAlert() {
alert('showAlert()');
}
}
正如你在plunkr中看到的那样,blur.trigger/click.delegate/click.trigger都会触发事件,但blur.delegate却没有.
为什么会这样？
你如何确定什么时候.delegate不起作用(当然没有手动测试)？
假设你有这样的代码:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>?
parentDiv当我点击" childDiv我怎么能这样做？" 时,我不想触发点击事件？
更新
另外,这两个事件的执行顺序是什么？
我创建了一个有几种方法的对象.其中一些方法是异步的,因此我想使用事件来在方法完成时执行操作.为此,我尝试将addEventListener添加到对象.
var iSubmit = {
addEventListener: document.addEventListener || document.attachEvent,
dispatchEvent: document.dispatchEvent,
fireEvent: document.fireEvent,
//the method below is added for completeness, but is not causing the problem.
test: function(memo) {
var name = "test";
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
event.memo = memo || { };
if (document.createEvent) {
try {
document.dispatchEvent(event);
} catch (ex) {
iAlert.debug(ex, 'iPushError');
}
} else { …假设我有一个Bootstrap Collapse:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim …我正在寻找一个处理React.js中冒泡和捕获的例子.我找到了一个JavaScript,但我找不到React.js的等价物.
我如何在React.js中创建冒泡和捕获的示例？
我正在尝试做一些非常简单的事情.基本上我有一个可点击的div'热点',当你点击它填满屏幕并显示一些内容.我通过简单地改变div的类,删除'spot'并添加'grow'来实现这一点,并且有一些CSS动画来使它成长.这很好用.
问题是,在这个div中有一个close_button,目前只是文本.我希望这可以将类切换回来 - 即删除成长和读取的点.单击时不会执行此操作.我相信这是在DOM加载时没有这些类的元素,但我是jQuery的新手,不知道如何解决这个问题.
我认为这可能是一种更明智的做法,有人能指出我正确的方向吗？我会非常感激的.我尝试使用toggleClass而无济于事.
$( document ).ready(function() {
$(".clickable").click(function() {
$(this).addClass("grown");
$(this).removeClass("spot");
});
$(".close_button").click(function() {
alert (this);
$("#spot1").removeClass("grown");
$("#spot1").addClass("spot");
});
});
更新:
我现在正在使用此代码,
$( document ).ready(function() {
$(document).on("click", ".close_button", function () {
alert ("oi");
$("#spot1").addClass("spot");
$("#spot1").removeClass("grown");
});
$(document).on("click", ".clickable", function () {
if ($(this).hasClass("spot")){
$(this).addClass("grown");
$(this).removeClass("spot");
}
});
});
奇怪的是,close_button函数仍然不会添加'spot'或删除'grow'虽然它会添加任何其他类,它会删除其他类...我添加了if子句,因为我认为这两个函数都可能被触发时间,互相取消,但似乎没有任何区别
我试图使用jquery委托绑定滚动事件.
HTML
<div id='parent'>
<div id='child'>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah …我有以下html:
<span onclick="alert('Boem')">
<button id="test1">test</button>
</span>
当我调用以下javascript时:
$('#test1').trigger('click');
onclick事件被触发两次,而我希望它只触发一次.因为JQuery应该在DOM树中查找op并且只找到一个onclick.
我无法控制范围,它是在第三方工具中生成的.我确实可以控制按钮和他的参数.
你可以在这里找到一个JSFiddle示例:http: //jsfiddle.net/Voga/v4100zke/
我不知道跨度的onclick监听器的内容.这也是由第三方工具生成的.我希望点击触发器像现在一样执行此onclick,但只需执行一次.
子和父都可以点击(子可以是jQuery点击事件的链接或div).当我点击child时,我如何只触发父点击事件而不触发子事件？
我只是希望得到一个共识,即JS在冒泡和捕获之间更好的事件委派模式.
现在我明白,根据特定的用例,人们可能希望使用捕获阶段而不是冒泡,反之亦然,但我想了解哪种委派模式适用于大多数一般情况以及为什么(对我而言似乎冒泡模式).
换句话说,W3C addEventListener实现背后的原因是支持冒泡模式.[仅当您指定第3个参数及其true时才会启动捕获.但是,你可以忘记第三个参数和冒泡模式被踢了]
我抬头看了看JQuery的绑定功能得到一个回答我的问题,似乎它甚至不支持捕获阶段事件(在我看来,因为IE不支持拍摄模式).
所以看起来冒泡模式是默认选择,但为什么呢？
javascript ×8
jquery ×5
addclass ×1
aurelia ×1
cordova ×1
css ×1
delegates ×1
dhtml ×1
dom ×1
html ×1
html5 ×1
object ×1
reactjs ×1
removeclass ×1
toggleclass ×1