必须在layer.open的success回调中对.layui-layer-content设置user-select:none及私有前缀,或绑定onselectstart与onmousedown事件拦截选中,以避免干扰交互且兼容IE9+。

要让Layui弹出层内的文字无法被鼠标拖选,必须在弹窗DOM渲染完成后对其内容区域应用user-select: none样式,不能作用于整个弹层容器,否则会干扰按钮点击、输入框聚焦等交互。
给弹窗内容区禁用文字选中
在layer.open的success回调中,用layero.find('.layui-layer-content')精准定位内容容器,然后设置CSS样式:
layer.open({
content: '请勿复制本段说明文字',
success: function(layero, index) {
layero.find('.layui-layer-content').css('user-select', 'none');
}
});
这一步必须写在success里——因为layer是异步插入DOM的,提前操作找不到元素;若用$(document).ready()包裹,仍可能因layer渲染延迟而失效。
只对.layui-layer-content加样式,是因为标题栏、按钮、关闭叉号等控件需要保留可交互性;若误设到.layui-layer根节点,会导致点击按钮无响应、输入框无法获得焦点。
兼容旧版浏览器的写法
IE10及以下版本不支持user-select,需补充私有前缀:
success: function(layero, index) {
var $content = layero.find('.layui-layer-content');
$content.css({
'user-select': 'none',
'-webkit-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none'
});
}
注意:-ms-user-select仅在IE10生效,IE9及更早版本不支持该特性,无法通过CSS禁用选中——若项目仍需兼容IE9,应改用JavaScript拦截selectstart事件。
用事件拦截彻底阻止选中(含IE9)
方法一:在success中绑定selectstart事件并阻止默认行为
success: function(layero, index) {
var $content = layero.find('.layui-layer-content')[0];
if ($content) {
$content.onselectstart = function() { return false; };
$content.addEventListener('selectstart', function(e) { e.preventDefault(); }, false);
}
}
方法二:原生JS兼容写法(推荐)
success: function(layero, index) {
var el = layero.find('.layui-layer-content')[0];
if (!el) return;
el.onselectstart = function() { return false; };
if (window.getSelection) {
el.onmousedown = function() { window.getSelection().removeAllRanges(); };
}
}
【关键点】必须同时设置onselectstart和onmousedown,否则在IE或某些移动端WebView中仍可触发部分选中。


















