我有一个自定义的JQuery自动完成控件,声明是这样的.
$('#SystemCode_Autocomplete').autocomplete({
source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
minLength: 1,
change: function(event, ui) {// some function},
select: function(event, ui) {// some function}
});
更改和选择事件是自定义的.问题是如果我在文本框中键入内容然后单击提交按钮(即没有标签输出或丢失焦点),或者如果我在键入文本框后按键提交,则不会触发更改事件,它必须在我提交之前.
我希望不要在提交按钮后面放置javascript,并且理想情况下在自动完成控件本身内执行此操作.我尝试将更改添加到模糊事件.
${'foo').blur(function() { $('bar').trigger('autocompletechange');
// or
${'foo').blur(function() { $('bar').change();
但他们都没有工作,任何人都有任何想法？
在mouseUp或touchEnd我想获得该事件发生的元素的引用.
在此示例中,您需要单击一个元素,拖动鼠标并释放另一个元素.释放鼠标时,该元素的背景将变为红色.我的代码适用于鼠标事件,但不适用于触摸设备.
当touchStart在一个元素上并且手指在另一个元素上释放时,我只获得对第一个元素的引用.
我需要改变什么才能使触摸事件与鼠标事件完全相同？
var isMouseDown = false;
var panel1 = document.getElementById( 'panel1' );
var panel2 = document.getElementById( 'panel2' );
panel1.onmousedown = onDocumentMouseDown;
panel1.onmouseup = onDocumentMouseUp;
panel1.onmousemove = onDocumentMouseMove;
panel1.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel1.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel1.addEventListener( 'touchend', onDocumentTouchEnd, false );
panel2.onmousedown = onDocumentMouseDown;
panel2.onmouseup = onDocumentMouseUp;
panel2.onmousemove = onDocumentMouseMove;
panel2.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel2.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel2.addEventListener( 'touchend', onDocumentTouchEnd, false );
function onDocumentMouseDown(event) {
event.preventDefault();
panel1.style.background="#2E442E"; …如何将observable绑定到可编辑的div文本内容？
我试图理解什么决定了点击嵌套时触发事件处理程序的顺序<div>- 我所看到的似乎与记录的行为不一致所以我正在寻找一些帮助来理解它.
我有2个嵌套的div,每个都有2个事件处理程序,一个用于捕获阶段,另一个用于冒泡阶段:
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
outer.addEventListener('click', function(){console.log('outer false');}, false);
outer.addEventListener('click', function(){console.log('outer true');}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function(){console.log('inner false');}, false);
inner.addEventListener('click', function(){console.log('inner true');}, true);
}
</script>
<style>
div {
border: 1px solid;
padding: 1em;
}
</style>
</head>
<body onload="setup()">
<div id="outer">
<div id="inner">
CLICK
</div>
</div>
</body>
</html>
根据我所读的输出应该是:
outer true
inner true
inner false
outer false
但我实际看到的(在Chrome和Firefox上)是:
outer true
inner false
inner true
outer false
任何人都可以解释这种差异吗？
我正在构建大型网站,使用大量的javascript,我的所有内容都被加载ajax,它与facebook非常相似,而且由于有很多不同的页面,我需要大量的javascript,所以我想到的是划分我的脚本在各个部分中,每个页面都有自己的脚本文件.
现在加载很简单,我只是为每个页面加载一个新文件,但我担心如果用户通过100个不同的页面加载100个不同的脚本文件会发生什么？
目前我的网站没有那么多页面,但我很确定它将来会在某个时候发展到近100个独特的页面.
那么用较慢的计算机的用户会发生什么？我猜它会开始放慢很多,因为没有刷新.根据我的阅读,不可能以任何简单的方式从加载的脚本文件中卸载所有事件和数据,如果我尝试这样做可能会花费我很多时间和精力来做到这一点.
所以我的问题是,我应该保留它的方式还是尝试做点什么呢？我目前正在使用jquery几个插件,如果我不得不猜测平均文件将是大约50-200行代码,主要是click事件和ajax调用.
请注意,每个页面对象都有它自己的前缀为每个类,例如:home_header,login_header
所以onClick事件监听器和类似的东西之间不应该有任何冲突.
编辑我在这个问题上设置了赏金,我希望听到更多的意见.
我要做的是,当用户点击页面上的某个位置时,包含随机图像的div将显示在点击位置并保持在那里.这必须能够重复,每次都显示不同的图像.有什么建议？
在我的应用程序中,我有一个包含一些设置信息的面板.点击按钮即可打开/关闭此面板,但我也希望能够通过敲击esc键盘来关闭它.
我的View代码如下所示:
Social.MainPanelView = Ember.View.extend({
elementId: 'panel-account-settings',
classNames: ['panel', 'closed'],
keypress: function(e){
console.log(e);
console.log('keypress');
},
close: function(){
this.$().prepareTransition().addClass("closed");
}
});
我也尝试过keyup和keydown,但没有任何反应.我怀疑这是因为这不是一个"输入"类型的视图,而只是一个标准视图.那么如何从关键事件触发View上的方法呢？
我应该澄清,这不属于这一特定要素的路线.我正在打开独立面板,如本视频中所示:
http://screencast.com/t/tDlyMud7Yb7e
更新1
这是我创建的一个快速小提琴,用于说明我遇到的问题.我可以很容易地触发click事件,但我正在寻找一个页面范围的keyup事件,它将检测被按下的esc键并触发特定View上的方法:
我event.stopPropagation()在我的应用程序中使用.然而,已经出现了一种情况,我希望传播继续,好像上面的函数从未被调用过一样.所以我想知道; 有没有办法在它被停止后"恢复"传播？将一次调用移动event.stopPropagation到十几个单独的条件语句会非常繁琐.
文档中有2个脚本
// my_script.js goes first
document.onclick = function() {
alert("document clicked");
};
// other_script.js comes after
// this overrides the onclick of my script,
// and alert will NOT be fired
document.onclick = function() {
return false;
};
为了确保我的click事件不会被其他脚本覆盖,我切换到了addEventListener.
// my_script.js goes first
document.addEventListener("click", function() {
alert("document clicked");
}, false);
// other_script.js comes after
document.addEventListener("click", function() {
return false;
}, false);
现在我又得到了一个问题.由于return false在第二个代码之后定义alert,为什么不阻止警报被调用？
如果我希望我的脚本能够完全控制click事件(比如忽略其他脚本中定义的事件一直返回false),该怎么办？
考虑以下示例代码:
<span>
<input type="checkbox">
</span>
$('span').click(function(e) {
e.preventDefault();
$(':checkbox')[0].checked = true;
});
据我所知,这应该发生:
preventDefault()应该阻止浏览器的默认行为检查复选框,即使事件处理程序附加在DOM层次结构的上方.这部分工作正常..checked = true应该起作用,我相信它应该独立于浏览器对我已取消的事件的默认操作.这部分看起来很麻烦,好像它preventDefault()正在影响它 - 删除preventDefault()它并按预期工作.复选框始终未选中的实际原因是什么？
我已经在Chrome 33和Firefox 27上进行了测试,所以这似乎不是一个浏览器错误.
这个问题主要是由于好奇心扩展我的DOM /事件模型知识.我不想要解决方法,而是想知道为什么这个例子失败了.