检测 html 元素中的用户选择
Detect user selection within html element
如何检测用户选择(用鼠标突出显示)是否在某个元素的子元素内?
例:
<div id="parent">
sdfsdf
<div id="container">
some
<span>content</span>
</div>
sdfsd
</div>
伪代码:
if window.getSelection().getRangeAt(0) is a child of #container
return true;
else
return false;
使用 jQuery on() 事件处理程序
$(function() {
$("#container > * ").on("click",
function(event){
return true;
});
});
编辑:http://jsfiddle.net/9DMaG/1/
<div id="parent">outside
<div id="container">
outside
<span>first_span_clickMe</span>
<span>second_span_clickMe</span>
</div>
outside</div>
$(function() {
$("#container > span").on("click", function(){
$('body').append("<br/>child clicked");
});
});
好的,
我设法以"肮脏"的方式解决了这个问题。代码可以使用改进,但它为我完成了工作,我现在懒得更改它。基本上,我遍历选择的对象,检查它是否在某个时候到达具有指定类的元素。
var inArticle = false;
// The class you want to check:
var parentClass = "g-body";
function checkParent(e){
if(e.parentElement && e.parentElement != $('body')){
if ($(e).hasClass(parentClass)) {
inArticle = true;
return true;
}else{
checkParent(e.parentElement);
}
}else{
return false;
}
}
$(document).on('mouseup', function(){
// Check if there is a selection
if(window.getSelection().type != "None"){
// Check if the selection is collapsed
if (!window.getSelection().getRangeAt(0).collapsed) {
inArticle = false;
// Check if selection has parent
if (window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement) {
// Pass the parent for checking
checkParent(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement);
};
if (inArticle === true) {
// If in element do something
alert("You have selected something in the target element");
}
};
}
});
JSFiddle
相关文章:
- d3基于用户选择动态更新节点
- 获取用户选择的不带时区的日期
- 如何使用javascript localStorage保存用户选择并在不同的html页面中显示
- jQuery根据用户选择启用/禁用asp.net控件
- 将用户选择添加到数组中
- 将用户选择的数据临时存储在我的阵列中
- 如果用户选择离开网页,如何删除记录
- 根据用户选择选择页面
- 如何根据用户选择动态更改多个复选框的编号
- 谷歌地图 - 用户选择不允许位置
- 根据用户选择获取 JSON 密钥
- 根据用户选择的输入编写 html 文本
- Hangman游戏将用户选择的字母与单词中的字母进行比较以进行猜测
- Javascript确认,捕获用户选择
- 获取用户选择的选项的值
- NodeJS+JS:根据当前用户选择生成动态链接
- 使用用户选择动态更新页面
- html5文件api,将用户选择的目录存储在sessionStorage中
- 如何根据用户选择顺序重新排序多选的值
- PHP根据用户选择的项目以模式加载数据