oncontextmenu:右键触发事件
onclick:左键触发事件
例子:
---------------CSS
#colorList{
width: 100px; position: absolute; } ul#colorList li { border: 1px solid #ddd; cursor: pointer; padding: 6px; } ul#colorList li:hover { background: #EFCEE7; color: #fff; }
-------------HTML
<!--设置一个ul列表--> <ul id="colorList"> <li color="red">设为红色</li> <li color="blue">设为蓝色</li> <li color="green">设为绿色</li> </ul>-----------JS
//右键可以设置颜色 $("#offerTextTable").on("contextmenu",".editorAble input",function (e) { var that=$(this); $("#colorList").css({ "display":"block", "top":that.offset().top-100, "left":that.offset().left-150 }); that.attr("status","active"); if(e.preventDefault()){ e.preventDefault() } }); $("#colorList li").click(function () { var that=$(this); var thatColor=that.attr("color"); $("#offerTextTable").find("input[status='active']").css("color",thatColor); $("#offerTextTable").find("input[status='active']").removeAttr("status"); $("#colorList").css({ "display":"none" }); });