您的位置:首页 > Web前端 > JQuery

jQuery 动态创建右键菜单并修改鼠标右击元素的值( 解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug)

2017-03-03 10:08 691 查看
jquery 动态创建右键菜单并修改鼠标右击元素的值( 解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
<script src="jquery-1.11.3.js"></script>
<style type="text/css">
.model01{  left:100px;top:100px;  }
.model02{  left:200px;top:200px;  }
.model03{  left:300px;top:300px;  }
.model04{  left:400px;top:400px;  }
.container{ width:100%; height: 1000px;}
</style>
<script>
$(document).ready(function(){
var rtClick = function (ele, coords) {
console.log(ele, ele.attr("id"));
var publicData = {};
publicData.ele = ele;
publicData.body = $("body");
var rtMenus = '<div class="rt_menus">' +
'<div></div>' +
'<label for="uid">ID:</label>' +
'<input type="text" id="uid" disabled />' +
'<div></div>' +
'<label for="uname">名字:</label>' +
'<input type="text" id="uname" />' +
'</div>';
$(".rt_menus").remove();//加上此句解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug
if (!publicData.body.find(".rt_menus")[0]) {
publicData.body.append(rtMenus);
}
if (publicData.body.find(".rt_menus")[0]) {
publicData.rtPanel = $(".rt_menus");
publicData.rtPanel.css({"left": coords.x, "top": coords.y}).find("#uid").val(ele.attr("id"));
publicData.rtPanel.find("#uname").val(publicData.ele.html());
publicData.uname = publicData.rtPanel.find("#uname");
publicData.uname.change(function (e) {
//菜单面板修改目标元素的值
publicData.ele.html($(this).val());
});
}
};
$(".container").on('mousedown','.model', function (e) {//绑定事件可选择父元素container,不可选择最外层如body;
if (e.which == 3) {
rtClick($(this), {x: e.clientX, y: e.clientY});
}
return false;
});
document.oncontextmenu = function () {
return false;
};
$(".container").click(function () {
$(".rt_menus").remove();
});
});
</script>
</head>
<body>
<div class="container">
<p class="model model01" id="model01" >01</p>
<p class="model model02" id="model02" >02</p>
<p class="model model03" id="model03" >03</p>
<p class="model model04" id="model04" >04</p>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery bug