Javascript 如何在保持文本区域可编辑的同时防止事件从文本区域冒泡?
我在jQuery mobile中有一个listview,其中每个条目都包含几行文本 点击条目应该会将文本的某些部分替换为可编辑的。再次单击条目应再次将文本区域替换为纯文本(现在已编辑) 在编辑文本时,用户应该能够在文本框中四处单击以选择文本的部分或移动光标。为了防止文本区域中的单击事件冒泡,我在事件上使用了Javascript 如何在保持文本区域可编辑的同时防止事件从文本区域冒泡?,javascript,jquery-mobile,jquery-events,Javascript,Jquery Mobile,Jquery Events,我在jQuery mobile中有一个listview,其中每个条目都包含几行文本 点击条目应该会将文本的某些部分替换为可编辑的。再次单击条目应再次将文本区域替换为纯文本(现在已编辑) 在编辑文本时,用户应该能够在文本框中四处单击以选择文本的部分或移动光标。为了防止文本区域中的单击事件冒泡,我在事件上使用了stopPropagation(),效果非常好 然而,尽管这在Chrome和Safari中有效,Firefox和Internet Explorer都不会移动光标,也不会让用户在文本区域中选择文
stopPropagation()
,效果非常好
然而,尽管这在Chrome和Safari中有效,Firefox和Internet Explorer都不会移动光标,也不会让用户在文本区域中选择文本的部分。
这里有我遗漏的东西吗?(对于Firefox,如果相关的话,我在Windows7上使用的是19.0.2版本。我尝试过使用preventDefault或返回false,但都不起作用——为什么要这样做?)
我创建了一个
html代码是
<ul id="listid" data-role="listview" data-filter="true" data-iconpos="center" data-split-icon="arrow-u" data-theme="c" data-split-theme="b" data-inset="true">
<li><a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
</p></a>
<a href="#" onclick="alert('Something else happens here')">This does something else</a>
</li>
</ul>
请忽略切换textarea的不太优雅的解决方案。IE对锚定标记中的textarea不满意。看
window.toggled = false;
$("#link1").click( function(e){
var textarea = $("#textarea1").toggle();
var comment = $("#comment1").toggle();
if(window.toggled){
comment.html(textarea.val());
}
else{
textarea.val(comment.html());
}
toggled = !toggled;
});
$("#textarea1").click(function(e){
if(console && console.log){ console.log(e);}
e.stopPropagation();
});
<a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
</p>
</a>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>