<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
margin: 50px;
}
#demo {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<span id="demo"></span>
<div id="test">
事件 三要素： 事件源.事件 = function（）｛ ｝
* onclick 鼠标单击
* ondblclick 双击
* onmous
事件 三要素： 事件源.事件 = function（）｛ ｝
* onclick 鼠标单击
* ondblclick 双击
* onmouseover 鼠标经过
* onmouseout 鼠标离开
* onmousedown鼠标按下
* onmouseup鼠标弹起
* onmousemove 鼠标移动
* onfocus 获取焦点
* onblur 失去焦点
* onchange 文本内容或者下拉 发生改变
* onload 网页加载
* unlaod 解载
* window.onscroll 窗口发生滚动时
* window.onresize 浏览器大写发生改变时
* onreset 重置
* onsubmit 提交
*
</div>
<script>
function $(id) {
return document.getElementById(id);
}
document.onmousedown = function(event){
var event = event || window.event;
var targetId = event.target.id;
console.log(targetId, event)
if(targetId !="demo"){
$("demo").style.display ="none";
}
}
$("test").onmouseup = function(event){
var event = event || window.event;
var x = event.clientX;
var y = event.clientY;
var txt ;//存储选中的内容
if(window.getSelection){//选中文字
txt= window.getSelection().toString();//转为字符串
console.log(txt);
}else{
txt = document.selection.createRange().text;//ie 的写法
}
if(txt){// 所有的字符串都是真的 ""是假的 所有的数字都是真的 0是假的
showBox(x,y,txt);
}
}
function showBox(a,b,str){
setTimeout(function () {
$("demo").style.display ="block";
$("demo").style.left = a+"px";
$("demo").style.top = b+"px";
$("demo").innerHTML = str;
},1000);
}
</script>
</body>
</html>
