默认行为
阻止页面上点击右键弹出菜单的默认行为
<script>
document.oncontextmenu = function(){
return false; //阻止默认事件
}
</script>实例1、自定义右键菜单
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 80px; height: 100px; background-color: #ccc; border: 1px solid #999; display: none; position: absolute;}
li{list-style: none;}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<script>
document.oncontextmenu = function (ev) { //点击鼠标右键
var oEvent = ev || event
var oDiv = document.getElementById('div1')
oDiv.style.display = 'block'
oDiv.style.left = oEvent.clientX + 'px' //菜单出现在鼠标点击的位置
oDiv.style.top = oEvent.clientY + 'px'
return false //阻止默认事件
}
document.onclick = function(){ //点击页面菜单消失
var oDiv = document.getElementById('div1')
oDiv.style.display = 'none'
}
</script>
</body>实例2、只能输入数字的文本框
<script>
window.onload = function(){
var oTxt = document.getElementById('txt')
oTxt.onkeydown = function(ev){
oEvent = ev || event
if(oEvent.keyCode != 8 && (oEvent.keyCode < 48 || oEvent.keyCode > 57)){ //如果按键不是0-9 并且 不是删除键
return false //阻止默认行为，不能输入
}
}
}
</script>拖拽
<body>
<div id="div1"></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1')
oDiv.onmousedown = function (ev) {
var oEvent = ev || event
var disX = 0
var disY = 0
disX = oEvent.clientX - oDiv.offsetLeft //将鼠标距离元素边距的位置作为拖拽的依据
disY = oEvent.clientY - oDiv.offsetTop
console.log(disX, disY)
document.onmousemove = function (ev) {
var oEvent = ev || event //oEvent 涉及到变量作用域，以及事件本身
console.log(oEvent.clientX)
//alert(9)
oDiv.style.left = oEvent.clientX - disX + 'px'
oDiv.style.top = oEvent.clientY - disY + 'px'
}
document.onmouseup = function () { //将事件加到document上，解决了脱离可视区鼠标抬起无效的问题
document.onmousemove = null
document.onmouseup = null
}
}
}
</script>
</body>阻止元素拖拽出可视区
<script>
window.onload = function () {
var oDiv = document.getElementById('div1')
oDiv.onmousedown = function (ev) {
var oEvent = ev || event
var disX = 0
var disY = 0
disX = oEvent.clientX - oDiv.offsetLeft //将鼠标距离元素边距的位置作为拖拽的依据
disY = oEvent.clientY - oDiv.offsetTop
document.onmousemove = function (ev) {
var oEvent = ev || event //oEvent 涉及到变量作用域，以及事件本身
var l = oEvent.clientX - disX
var t = oEvent.clientY - disY
if(l < 0){ //如果元素x轴位置小于0说明在左侧拖拽出去了
l = 0
}else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){ //如果元素在x轴位置大于可视区宽度减去自身宽度说明从右侧拖拽出去了
l = document.documentElement.clientWidth - oDiv.offsetWidth
}
if(t < 0){
t = 0
}else if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
t = document.documentElement.clientHeight - oDiv.offsetHeight
}
oDiv.style.left = l + 'px'
oDiv.style.top = t + 'px'
}
document.onmouseup = function () { //将事件加到document上，解决了脱离可视区鼠标抬起无效的问题
document.onmousemove = null
document.onmouseup = null
}
}
}
</script>