8.7w+
社区成员
<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">
<a href='http://www.baidu.com'>Baidu</a>
<button type="button">测试</button>
</div>
<input type="button" id="myinfo" value="ShowInfo" />
(function() {
var btn = document.getElementById('myinfo');
var div = document.getElementById('MYCRM');
btn.onclick = function() {
div.style.display = '';
div.onmouseout = function(e) {
e = e || window.event;
var target = e.srcElement ? e.srcElement : e.target,
related = e.toElement ? e.toElement : e.relatedTarget;
if (!div.contains(related)) div.style.display = 'none';
}
}
})();
<div id="MYCRM" style="width: 300px; height: 200px; background-color:#E6E6E6; display:none">
<a href='http://www.baidu.com'>Baidu</a>
</div>
<input type="button" id="myinfo" value="ShowInfo" />
<script type="text/javascript">
(function(){
var contains = function(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPositon(b) & 16);
}
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
var btn = document.getElementById('myinfo');
var div = document.getElementById('MYCRM');
btn.onclick = function(){
div.onmouseout = function(event){
var target = Event(event).relatedTarget;
if(!contains(this, target)){
this.style.display = 'none';
this.onmouseout = null;
}else {
target.onmouseout = function(event) {
event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
}
}
div.style.display = 'block';
}
})();
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="MYCRM" style="display:none;width:100px;height:100px;border:1px solid #ddd;">
this is a layer
</div>
<input type="button" id="myinfo" value="myinfo" />
<script type="text/javascript">
document.getElementById('myinfo').onclick=function(){
var tm=document.getElementById('MYCRM');
tm.style.display='block';
tm.onmouseout=function(){
this.style.display='none';
}
}
</script>
</body>
</html>