<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
textarea{
width: 400px;
height: 600px;
border:1px solid deeppink;
outline: none;
}
#ul{
background: #f5f5f5;
width: 100px;
padding-left:0;
position: absolute;
top:0;left:0;
display: none;
}
#ul li{
list-style: none;
height: 50px;
line-height: 50px;
width: 100px;
color: deeppink;
text-align: center;
cursor: pointer;
font-size: 13px;
}
#ul li:hover{
background: deeppink;
color:#fff;
}
</style>
</head>
<body>
<textarea id="" value=""></textarea>
<ul id="ul">
<li id="li1">交个朋友吧</li>
<li id="li2">confirm</li>
<li id="li3">search in baidu</li>
<li id="li4">search what</li>
</ul>
<script>
var ul=document.getElementById("ul");
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
var li4=document.getElementById("li4");
// var a = document.getSelection().toString();
//取消右键单击时浏览器默认的状态
document.οncοntextmenu= function () {
return false;
};
//判断是右键释放
document.οnmοuseup= function (event) {
// console.log(event.button);
if(event.button==2){
ul.style.display="block";
ul.style.left=event.clientX+"px";
ul.style.top=event.clientY+"px";
}
else if(event.button==0){
ul.style.display="none";
}
};
ul.οnmοusedοwn= function (e) {
if(e.target.id=="li1"){
alert("嘿,交个朋友吧!");
}
else if(e.target.id=="li2"){
if(confirm("确定要离开吗?")){
// window.close();
}
}
else if(e.target.id=="li3"){
var ss=document.getSelection().toString();
// console.log(ss);
if(!ss){
alert("请选取你要搜索的内容!");
}
window.open("https://www.baidu.com"+"s?wd="+ss);
}
else if(e.target.id=="li4"){
var pro=prompt("请输入要搜索的内容");
if(!pro){
confirm("请输入要搜素的内容");
}
else{
window.open("https://www.baidu.com"+"s?wd="+pro);
}
}
this.style.display="none";
};
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
textarea{
width: 400px;
height: 600px;
border:1px solid deeppink;
outline: none;
}
#ul{
background: #f5f5f5;
width: 100px;
padding-left:0;
position: absolute;
top:0;left:0;
display: none;
}
#ul li{
list-style: none;
height: 50px;
line-height: 50px;
width: 100px;
color: deeppink;
text-align: center;
cursor: pointer;
font-size: 13px;
}
#ul li:hover{
background: deeppink;
color:#fff;
}
</style>
</head>
<body>
<textarea id="" value=""></textarea>
<ul id="ul">
<li id="li1">交个朋友吧</li>
<li id="li2">confirm</li>
<li id="li3">search in baidu</li>
<li id="li4">search what</li>
</ul>
<script>
var ul=document.getElementById("ul");
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
var li4=document.getElementById("li4");
// var a = document.getSelection().toString();
//取消右键单击时浏览器默认的状态
document.οncοntextmenu= function () {
return false;
};
//判断是右键释放
document.οnmοuseup= function (event) {
// console.log(event.button);
if(event.button==2){
ul.style.display="block";
ul.style.left=event.clientX+"px";
ul.style.top=event.clientY+"px";
}
else if(event.button==0){
ul.style.display="none";
}
};
ul.οnmοusedοwn= function (e) {
if(e.target.id=="li1"){
alert("嘿,交个朋友吧!");
}
else if(e.target.id=="li2"){
if(confirm("确定要离开吗?")){
// window.close();
}
}
else if(e.target.id=="li3"){
var ss=document.getSelection().toString();
// console.log(ss);
if(!ss){
alert("请选取你要搜索的内容!");
}
window.open("https://www.baidu.com"+"s?wd="+ss);
}
else if(e.target.id=="li4"){
var pro=prompt("请输入要搜索的内容");
if(!pro){
confirm("请输入要搜素的内容");
}
else{
window.open("https://www.baidu.com"+"s?wd="+pro);
}
}
this.style.display="none";
};
</script>
</body>
</html>