顺便整理一下各种触发
js触发
页面加载事件（onload），鼠标双击事件（ondbclick）
window.onload=function(){
//绑定元素,执行对应事件 鼠标双击(ondblclick)
//鼠标双击事件ondblclick
document.getElementById('d2').ondblclick=function(){
alert('我是双击显示的');
}
}鼠标点下（onmousedown）事件（点下去就执行，鼠标无需抬起）
window.onload=function(){
//绑定元素,执行鼠标点下操作 鼠标点下(onmousedown)
document.getElementById('d3').onmousedown=function(){
alert('我是鼠标点下提示');
}
}鼠标抬起（onmouseup）事件（点下后，然后鼠标回弹才执行）
window.onload=function(){
//绑定元素,执行鼠标抬起事件 鼠标抬起(onmouseup)
document.getElementById('d4').onmouseup=function(){
alert('鼠标抬起的提示');
}
}鼠标移动（onmousemove）事件
window.onload=function(){
//绑定元素,执行鼠标移动事件 鼠标移动(onmousemove)
document.getElementById('d5').onmousemove=function(){
alert('鼠标移动的提示');
}
}鼠标移入（onmouseover）事件 只要在指定div中移动就会触发
window.onload=function(){
//绑定元素,执行鼠标移入事件 鼠标移入(onmousemove)
document.getElementById('d6').onmouseover=function(){
alert('鼠标移入操作');
}
}鼠标移出（onmouseout）事件
window.onload=function(){
//绑定元素,执行鼠标移出事件 鼠标移出(onmouseout)
document.getElementById('d7').onmouseout=function(){
alert('鼠标移出操作');
}
}JQ触发
click 事件
当用户点击一个元素时触发。
$('button').click(function() {
alert('你点击了按钮！');
});mouseenter 和 mouseleave 事件
当鼠标指针进入或离开一个元素时触发。
$('#myElement').mouseenter(function() {
alert('鼠标进入了元素！');
}).mouseleave(function() {
alert('鼠标离开了元素！');
});3. mousedown 和 mouseup 事件
当用户在元素上按下或释放鼠标按钮时触发。
$('#myElement').mousedown(function() {
alert('鼠标按钮被按下！');
}).mouseup(function() {
alert('鼠标按钮被释放！');
});4. mousemove 事件
当鼠标指针在元素内部移动时触发。
$('#myElement').mousemove(function(event) {
alert('鼠标位置：X=' + event.pageX + ', Y=' + event.pageY);
});5. hover 事件
这是 mouseenter 和 mouseleave 的便捷方法。
$('#myElement').hover(
function() {
alert('鼠标进入了元素！');
},
function() {
alert('鼠标离开了元素！');
}
);6. 自定义鼠标事件处理
你还可以根据具体的业务需求，编写自定义的鼠标事件处理逻辑。
$(document).ready(function() {
$('#myElement').on('click', function(event) {
var x = event.pageX;
var y = event.pageY;
alert('你在位置 X=' + x + ', Y=' + y + ' 点击了元素！');
});
});设置一个div样式 让看起来区域内是不可操作的
$("#myDiv").css("position", "relative").append("<div class='overlay'></div>");
// 样式可自行修改
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
}我的实现
我的目的是在一块div中 移入 内部不能操作
同时我也禁用了 鼠标 、 键盘 、 触屏 等操作
-
第一种办法 ：
var isMouseOver = false;
");
('.tablediv1').on('mouseover', function() { var this = (this); if (!isMouseOver) { isMouseOver = true; this.css("position", "relative").append("
console.log('鼠标移入操作');
// 一次性绑定需要阻止的事件
this.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll', function(e) { e.preventDefault(); e.stopPropagation(); console.log('鼠标移入阻止的事件'); return false; }); } }).on('mouseout', function() { var this = (this); isMouseOver = false; // 在鼠标移出时，可以考虑移除之前绑定的事件处理器，恢复交互能力 this.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll');
console.log('鼠标移出阻止的事件');
('.overlay', this).remove(); // 移除之前添加的overlay元素
});
第二种办法：
<div id="myDisabledDiv" class="layui-layer-wrap">
内容
</div>
===================================
#myDisabledDiv.disabled {
pointer-events: none;
opacity: 0.6;
user-select: none;
}
===================================
// 初始化时检查是否需要禁用
disableDivWhenNeeded('#myDisabledDiv');
// 假设有一个按钮用于切换禁用状态
$('#toggleDisable').click(function(){
var div = $('#myDisabledDiv');
if(div.hasClass('disabled')){
div.removeClass('disabled');
enableDivEvents(div);
} else {
div.addClass('disabled');
disableDivEvents(div);
}
});
});
function disableDivEvents(div) {
div.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
}
function enableDivEvents(div) {
div.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu');
}
function disableDivWhenNeeded(divSelector) {
// 根据你的业务逻辑判断是否需要禁用
var shouldDisable = true; // 这里替换成你的条件判断
if (shouldDisable) {
$(divSelector).addClass('disabled');
disableDivEvents($(divSelector));
}
}由于都框架问题还有浏览器插件会拦截然后给了警告不能触发 就有了下面的
第三种办法：
// 初始化时检查是否需要禁用
disableDivWhenNeeded('#myDisabledDiv');
// 假设有一个按钮用于切换禁用状态
$('#toggleDisable').click(function(){
var div = $('#myDisabledDiv');
if(div.hasClass('disabled')){
div.removeClass('disabled');
enableDivEvents(div);
} else {
div.addClass('disabled');
disableDivEvents(div);
}
});
});
function addPassiveEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler, { passive: true });
}
function removePassiveEventListener(element, eventName, handler) {
element.removeEventListener(eventName, handler, { passive: true });
}
function disableDivEvents(div) {
addPassiveEventListener(div.get(0), 'wheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
addPassiveEventListener(div.get(0), 'touchstart', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
div.on('keydown mousewheel DOMMouseScroll contextmenu', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
}
function enableDivEvents(div) {
removePassiveEventListener(div.get(0), 'wheel', null); // 注意这里第二个参数为null，因为我们不传递具体的handler
removePassiveEventListener(div.get(0), 'touchstart', null);
div.off('keydown mousewheel DOMMouseScroll contextmenu');
}
function disableDivWhenNeeded(divSelector) {
// 根据你的业务逻辑判断是否需要禁用
var shouldDisable = true; // 这里替换成你的条件判断
if (shouldDisable) {
$(divSelector).addClass('disabled');
disableDivEvents($(divSelector));
}
}更换过后的触发 。。。。