列表中每一项添加鼠标事件mouseenter和mouseleave最详细代码_mouseenter和mouseleave下拉列表-优快云博客

项目场景：

PC端列表当这个列表的适配不是很友好的情况下一般在一些比较老的项目里如果某一项的描述超过了最大的宽度部分内容导致被遮挡

例如：证件类型当特别长的时候展示不全这个有很多解决的方法此篇将根据我具体在项目中用的做分享！

在这里插入图片描述

问题描述

当列表中的某一列的内容描述超过最大宽度内容被遮挡第一次是使用了Css中的样式用三个省略号展示当鼠标移动hover时展示所有内容但是这个在当前的情况下是会将这个列表的高度撑大不友好

所以我采用了javascript中的两个事件 mouseover和mouseout 但是这个两个事件存在一个bug 就是当列表有滚动条时滑动到最后发现列表频繁的进行事件的触发抖动所以我去详细的了解了一下如下的四个事件

JavaScript中的鼠标事件。

区别

mouseenter和mouseleave
mouseenter 是当鼠标指针进入元素内部时触发， mouseleave 是当鼠标指针离开元素内部时触发。这一对事件不会受元素内部子元素的影响，只有进入和离开目标元素本身时才会触发。
例如，一个带有内部子元素（像文本或者按钮）的盒子，鼠标进入盒子触发 mouseenter ，离开盒子触发 mouseleave ，在盒子内部的子元素间移动不会触发这两个事件。
mouseover和mouseout
mouseover 在鼠标指针进入元素或者元素的子元素时都会触发。 mouseout 在鼠标指针离开元素或者进入元素的子元素时都会触发。
比如一个包含图片的 <div> ，当鼠标移到图片（ <div> 的子元素）上时，会触发 <div> 的 mouseover ；当鼠标从 <div> 移到图片上，就会触发 <div> 的 mouseout 。

相同点

都是用于处理鼠标在元素上的交互动作，帮助开发者实现如菜单显示隐藏、元素样式改变等交互功能。
可以在HTML元素的属性中或者通过JavaScript代码添加事件监听器来使用这些事件。

完整过程以及代码：

HTM 这里就是根据实际的情况去添加事件就行
例如如下：

在这里插入图片描述

完整代码：

主要事件的实现方式这个也需要根据具体情况分析，如下

//适配第一张图片
<script>
    function showFullText(event){
	console.log('event=======>',event)
    var target = event.target;
    //var fullText = target.textContent.trim(); 
	 var fullText = target.defaultValue.trim();
	 if (fullText === '') {
	        return; // 如果内容为空，直接返回，不显示弹框
	    }
    console.log('获取td的文本内容',fullText)
    // 创建一个显示完整内容的弹出框
    var fullTextElement = document.createElement('div');
    fullTextElement.className = 'full-tips';
    fullTextElement.textContent = fullText;
   // 将弹出框插入到td容器中
    /*target.parentNode.appendChild(fullTextElement);
    // 显示弹出框
    fullTextElement.style.display = 'block';*/
    var td = target.parentElement;
    if (td.tagName!== 'TD') {
        console.log('目标元素的父元素不是 td');
        return;
    }
    var tdRect = td.getBoundingClientRect();
    if (!tdRect) {
        console.log('无法获取 td 的位置信息');
        return;
    }
    // 设置弹出框的位置
    fullTextElement.style.top = tdRect.bottom + 5 + 'px';
    fullTextElement.style.left = tdRect.left + 'px';
    // 将弹出框插入到 td 的父元素中，即 td 容器的外部
    td.parentElement.appendChild(fullTextElement);
    // 显示弹出框
    fullTextElement.style.display = 'block';
    
}

function hideFullText(event) {
//console.log('event=======>',event)	
   var target = event.target;
    var td = target.parentElement;
    if (td.tagName!== 'TD') {
        return;
    }
    var fullTextElement = td.parentElement.querySelector('.full-tips');
    if (fullTextElement) {
        fullTextElement.style.display = 'none';
        fullTextElement.parentNode.removeChild(fullTextElement);
    }
}
</script>

css样式

.full-tips {
       		font-size: 20px;
            position: absolute;
            background-color: #f9f9f9;
            padding: 5px;
            border: 1px solid #ccc;
            z-index: 1;
            display: none;
            width: auto; /* 自适应宽度 */
            max-width: 300px; /* 最大宽度 */
            white-space: normal; /* 自动换行 */
        }

//此代码适配第二张图片   写法上有一点区别  主要是去找目标元素
function showFullText(event) {
    console.log('event=======>', event);
    var target = event.target;
    // 检查目标元素是否在td内，如果不是，向上查找直到找到td
    while (target && target.tagName!== 'TD') {
        target = target.parentNode;
    }
    if (!target) {
        console.log('未找到目标td元素');
        return;
    }
    var fullText = target.textContent.trim();
    var fullText = target.textContent.trim();
    if (fullText === '') {
        return; // 如果内容为空，直接返回，不显示弹框
    }
//    console.log('获取td的文本内容  innerText=======>', fullText);

    // 创建一个显示完整内容的弹出框
    var fullTextElement = document.createElement('div');
    fullTextElement.className = 'full-text';
    fullTextElement.textContent = fullText;
//    console.log('fullText======>', fullTextElement.textContent);

    // 设置弹出框的基本样式
    fullTextElement.style.position = 'absolute';
    fullTextElement.style.display = 'block';
    fullTextElement.style.zIndex = '9999';
//    fullTextElement.style.backgroundColor = '#f9f9f9';
    fullTextElement.style.border = '1px solid gray';
    fullTextElement.style.padding = '5px';
    fullTextElement.style.wordBreak = 'break - word';
    fullTextElement.style.fontSize = '12px';
    fullTextElement.style.width = 'auto';
    fullTextElement.style.maxWidth = '300px';
    fullTextElement.style.top = '0';
    fullTextElement.style.whiteSpace = 'normal';

    // 获取td的尺寸和位置信息
    var rect = target.getBoundingClientRect();
    if (!rect) {
        console.log('无法获取 td 的位置信息');
        return;
    }
    var parentRow = target.parentNode;
    var rowCells = parentRow.children;
    console.log("zuihouyige", parentRow,rowCells)
//    fullTextElement.style.top = rect.bottom + 'px';
//    fullTextElement.style.left = rect.left + 'px';
//    fullTextElement.style.width = rect.width + 'px';

    // 将弹出框插入到td容器中
    target.appendChild(fullTextElement);
}


function hideFullText(event) {
    console.log("hideFullText", event);
    var target = event.target;
    // 先检查点击的目标元素是否在td内，如果是则获取td元素
    while (target && target.tagName!== 'TD') {
        target = target.parentNode;
    }
    if (target) {
        var fullTextElement = target.querySelector('.full-text');
        if (fullTextElement) {
            fullTextElement.style.display = 'none';
            target.removeChild(fullTextElement);
        }
    }
}