我只是希望得到一个共识,即JS在冒泡和捕获之间更好的事件委派模式.
现在我明白,根据特定的用例,人们可能希望使用捕获阶段而不是冒泡,反之亦然,但我想了解哪种委派模式适用于大多数一般情况以及为什么(对我而言似乎冒泡模式).
换句话说,W3C addEventListener实现背后的原因是支持冒泡模式.[仅当您指定第3个参数及其true时才会启动捕获.但是,你可以忘记第三个参数和冒泡模式被踢了]
我抬头看了看JQuery的绑定功能得到一个回答我的问题,似乎它甚至不支持捕获阶段事件(在我看来,因为IE不支持拍摄模式).
所以看起来冒泡模式是默认选择,但为什么呢?
我的jsp页面上有一个html div,我已经放了一个锚标记,请在下面找到代码,
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint"
onclick="markActiveLink(this);">ABC</a>
</h2>
</div>
Run Code Online (Sandbox Code Playgroud)
js代码
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
Run Code Online (Sandbox Code Playgroud)
在这里,当我点击div时,我得到了警告123消息,它很好但是当我点击ABC我希望消息我想调用markActiveLink方法.
我的代码出了什么问题?请帮帮我.
在事件修饰符下的vue文档中,有一个调用的示例,capture其中包含以下内容:
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
Run Code Online (Sandbox Code Playgroud)
我已经做了一些搜索,但是没有找到关于如何修改事件绑定的明确答案,然后我想到了自己'你知道谁总能找到答案吗?堆栈溢出'
我试图在附加到按钮的另一个单击事件中向文档添加单击事件.但是,第二次单击事件会立即触发,就像事件重叠一样.我考虑停止传播,使用超时,删除监听器,preventDefault(),但我没有成功.
这是我想要做的一个例子.
document.getElementById("test").addEventListener('click', first);
function first(){
document.addEventListener('click', second);
}
function second(){
alert("I'm not suppose to appear after the first click, only the second.");
}
Run Code Online (Sandbox Code Playgroud)
为了测试,我使用一个简单的按钮
<button type="button" id="test">Click</button>
Run Code Online (Sandbox Code Playgroud)
我没有JQuery这样做.这可能吗?
我使用jQuery mobile在HTML5,JavaScript和CSS中创建了一个图库.IE Phonegap平台好的.
图像是动态地加载并加载到其中,如下所示:http:
//torontographic.com/wordpress/mouseSwipe/mouseSwipe.html
鼠标滑动滑块上方:
TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com
Run Code Online (Sandbox Code Playgroud)
随之而来的问题是我无法点击图像并转到下一页,因为两个事件一起发生.
第二个问题是我无法从放置图库的地方向下滑动页面,除了没有图库的其他区域.
为了更清楚,我正在制作新闻应用程序,其中我添加了5-10个图库,如Pulse新闻应用程序.
我正在编写MELT监视器(自由软件,alpha阶段,与GCC MELT域特定语言相关以定制GCC).它使用libonion来表现为一个专门的Web服务器,我希望它成为我正在设计的某些DSL的语法导向编辑器.如果重要,我说的是提交97d60053.您可以运行它,./monimelt -Dweb,run -W localhost.localdomain:8086然后在浏览器中打开http://localhost.localdomain:8086/microedit.html.
我发光(通过文件webroot/microedit.html)
<h1>Micro Editing Monimelt</h1>
<div id='microedit_id' contenteditable='true'>*</div>
<hr/>
Run Code Online (Sandbox Code Playgroud)
然后一些AJAX技巧正在#micredit_id用包含类似于以下内容的东西填充该元素:
<dd class='statval_cl' data-forattr='notice'> ▵
<span class='momnode_cl'>*<span class='momconn_cl'>
<span class='momitemref_cl'>comment</span></span>
(“<span class='momstring_cl'>some simple notice</span>”
<span class='momnode_cl'>*<span class='momconn_cl'>
<span class='momitemref_cl'>web_state</span></span>
(<span class='momnumber_cl'>2</span>)</span>
<span class='momitemval_cl'>hashset</span>
<span class='momset_cl'>{<span class='momitemref_cl'>microedit</span>
<span class='momitemref_cl'>the_agenda</span>}</span>
<span class='momtuple_cl'>[<span class='momitemref_cl'>web_session</span>
<span class='momitemref_cl empty_cl'>~</span>
<span class='momitemref_cl'>the_system</span>]</span>)</span> ;</dd>
Run Code Online (Sandbox Code Playgroud)
现在,我希望每个<span>类momitemref_cl都对某些键盘(也许是鼠标)事件敏感.但是,contenteditable元素可以通过许多用户操作进行编辑(我甚至不了解这些用户操作的整个列表是什么......)我只希望这些span元素能够响应已定义和受限制的密钥集按(字母数字和空格)并且不能用户更改(例如没有标点符号,没有"剪切",没有"粘贴",不backspace …
我最近遇到过这种情况(这里简化).只需用一个元素包装一个复选框,并在它的click事件上应用preventDefault(),然后该复选框将被取消选中.
看到这个小提琴,但这里是一个剪辑:
<div>
<input type="checkbox"/>
</div>
/* Wrapper could be any element (and any ancestor element will work) */
$('div').on('click', function(e){
e.preventDefault();
});
/* Uncomment to make the checkbox work again
$('input').on('click', function(e){
e.stopPropagation();
});
*/
Run Code Online (Sandbox Code Playgroud)
行为发生在Chrome和FF中,所以我认为这是有意的.
为什么已经在复选框上触发的click事件不会导致复选框被切换?在preventDefault对祖先好像它应该是风马牛不相及的孩子复选框的行为.似乎,为了发生复选框更改,click事件需要一直自由地冒泡到文档根目录.
这里发生了什么?
我有点困惑.
我有一个用户可以单击的复选框,用于确定我的页面上的私人电话号码是对所有人还是仅对管理员可见.当单击该框时,我想确保您首先被允许首先打印它的状态仅用于测试目的.当我运行此功能时,它会运行两次.
我在其他地方读到这是因为Callbacks?但是我回复假,所以这不应该是这样的吗?
我不是一个JavaScript向导,所以我仍然不了解JavaScript及其与ASP的交互.
/**
* Used to Check whether a Private Phone number should be hidden or shown.
*/
function ValidateHidePrivate() {
if (scope["pickeduser"] != scope["credential"]) {
alert("Not allowed");
return false;
} else {
alert(document.getElementById("HidePrivate").checked);
return false;
}
}
Run Code Online (Sandbox Code Playgroud)
和HTML:
<label for="HidePrivate" onclick="ValidateHidePrivate()">
<input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" />
Hide my Private Phone Number
</label>
Run Code Online (Sandbox Code Playgroud)
有帮助吗?
文件partial.html看起来像这样: <button id="test">Hi I am from a partial!</button>
Partial.html动态地包含在页面上,使用XMLHttpRequest:
var oReq = new XMLHttpRequest();
oReq.open('get', 'partial.html', true);
oReq.send();
oReq.onload = function(){
document.querySelector('#pageArea').innerHTML = this.response;
}
}
Run Code Online (Sandbox Code Playgroud)
如何添加一个将应用于将来exisiting的事件侦听器,#test 而不是在内容加载并插入后执行#pageArea?
(请不要使用jQuery解决方案!)
我audio在一个页面上有很多元素,我想一次只播放一个元素.也就是说,如果audio正在播放一个元素,并且我在另一个元素上单击播放,则前一个audio元素应该暂停.
我从另一个问题中找到了一个jQuery代码,但它使用了一个图像作为播放/暂停控件.我正在使用元素的内置controls='controls'属性audio.audio在我的情况下,是否可以使用jQuery来控制元素的播放/暂停功能?
这是我的HTML代码
<div>
<p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
<div>
<p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
Run Code Online (Sandbox Code Playgroud)
这是jQuery代码
$(document).ready(function() {
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", …Run Code Online (Sandbox Code Playgroud) javascript ×9
html ×4
jquery ×3
html5 ×2
onclick ×2
asp.net-mvc ×1
audio ×1
checkbox ×1
cordova ×1
css3 ×1
dom-events ×1
events ×1
function ×1
html5-audio ×1
linux ×1
vue.js ×1