js中鼠标移动事件触发时,如何获得当前鼠标所在元素的内容

Posted 2023-04-25

<div class="wrapl" id="libox">
<ul>
<li><a id="A2"><span id="Span2">>>aaa</span></a></li>
<li><a id="A3"><span id="Span3">>>bbb</span></a></li>
<li><a id="A4"><span id="Span4">>>ccc</span></a></li>
</ul>
</div>
代码如上，我希望在鼠标鼠标移动到任意一个li时能够获取到当前元素的内容，比如移动到第一个li的时候能够获取到"aaa"，哪个大神能解答一下？跪求在线等！

参考技术A

用jquery库写就更简单呀,如这样:

$(function()

    $('div#libox li').mouseover(function()alert($(this).find('span').html()););  

);

追问

如果用JavaScript脚本呢

追答document.getElementById("libox").onmouseover = function(e) 

    if ((e.target||window.event.srcElement).tagName.toLowerCase() === 'span') 

        alert((e.target||window.event.srcElement).innerHTML);

        return false;

    

    return false;

;

 原生JS你这样写试试吧

参考技术B

用jquery库写就更简单呀,如这样:12345$(function()     $('div#libox li').mouseover(function()alert($(this).find('span').html()););   )。

拓展：

1、 JS 即 JavaScript。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 

2、在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

如何解决鼠标移动到子元素 会触发父元素的mouseout事件

方法一. 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】

mouseover与mouseenter

mouseover  => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。

mouseout与mouseleave

mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave => 只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。

方法二：利用e.stopPropagation()阻止事件进一步传播

e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。