使用 jQuery 检测是否将鼠标悬停在 div 中的图像上

Question

我有一个例子：

<div class="class1" id="id_1">
test
</div>

function handler(ev) {
    let target = $(ev.target);
    let elId = target.attr('id');
    if( target.is("div[id^='id_']") ) {
         let lastChar = elId.substr(elId.length - 1);
       alert('The mouse was over'+ lastChar );
    }
}
$("div[id^='id_']").mouseleave(handler);

它的工作方式是，如果我将鼠标悬停在一个元素上，则会显示警报 - 如果我在此div中只有一张图片，则会出现问题 - 然后它不起作用。 如果我只有这样的图片，如何使它更好地工作，例如我有：

<div class="class1" id="id_1">
<img src="/img_src">
</div>

Answer 1

使用$(ev.currentTarget)或$(this)来引用匹配选择器的元素，而不是任何作为后代的目标

 function handler(ev) { console.clear(); let $div = $(ev.currentTarget); let elId = $div.attr('id'); console.log('currentTarget id:', elId) $div= $(this); elId =$div.attr('id'); console.log('this id:', elId) } $("div[id^='id_']").mouseleave(handler);

 .class1{ margin: 1em; border: 1px solid green

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class1" id="id_1"> <div class="inner">test 1</div> </div> <div class="class1" id="id_2"> <div class="inner">test 2</div> </div>