鼠标悬停事件未正确启动

Question

我正试图在按钮上显示鼠标悬停事件的工具提示警报。然而，实际情况是，只有当我将鼠标第二次悬停在按钮上时，警报才会触发。换言之，我必须悬停，离开，然后重新进入事件才能启动。

如果有人能检查我的代码，指出我的错误，我将不胜感激。非常感谢。

小提琴示例

<script type="text/javascript">
$(function() {
$(document).on('mouseover', '#srcsubmit', function() {
if ($("#srcsubmit").prop('disabled') == true) {
$("#srcsubmit").css('cursor', 'help');
$('#srcsubmit').tipso({
position: 'right',
titleContent: 'Search Button Disabled',
content: 'This field cannot be modified',
background: '#889eb0',
titleBackground: '#63a9e4',
color: 'white',
width: 275,
size: 'default'
});
} else {
return false;
}
});
});
</script>

html

<input type="text" class="srcBox" id="srcBox" name="srcBox" />
<input type="button" class="srcsubmit btn-primary" id="srcsubmit" Value="Search" />
<div class="srchBoxError"></div>
<br />
<br />
<input type="text" class="srcBoxRslt" id="srcBoxRslt" name="srcBoxRslt" />
<input type="button" class="srcRslt btn-primary" id="srcRslt" Value="Return" />
<div class="dstrBoxError"></div>

Answer 1

如果使用firefox浏览器，即使禁用了元素，也可以使用鼠标事件。但它不能与其他浏览器(特别是chrome(配合使用。

问题解决方案：

问题是tipso插件仅在第一个mouseover操作上定义。然后对于下一个mouseover，只有它开始工作。因此，您需要将tipso代码定义放置在ready函数本身中。

只需将tipso代码定义放置在mouseover事件之外，如下面的代码片段所示。

代码片段：

$(function() {
$('#srcsubmit').tipso({
position: 'right',
titleContent: 'Search Button Disabled',
content: 'This field cannot be modified',
background: '#889eb0',
titleBackground: '#63a9e4',
color: 'white',
width: 275,
size: 'default'
});
$(document).on('mouseover', '#srcsubmit', function() {
if ($("#srcsubmit").prop('disabled') == true) {
$("#srcsubmit").css('cursor', 'help');
} else {
return false;
}
});
});

Fiddle DEMO

希望这能有所帮助！

Answer 2

鼠标事件不会发生在禁用的元素上是关键问题。

因此，这里有一个调整的步行
您将使用一个绝对定位的div(在这个演示中是半透明的红色…供您查看(来放置在禁用按钮的正上方。在该div上，您将实例化Tipso。。。按钮上没有。

现在，您只需要在启用/禁用按钮时显示/隐藏该div。它只是作为蒂普索的"鼠标事件区"。

听起来不错吗？

$(function() {

// Get our 2 elements in variables to avoid useless lookups
var srcsubmit = $("#srcsubmit");
var srcsubmit_zone = $("#srcsubmit-zone");

// Hide the "zone" if the button is NOT disabled
if (!srcsubmit.prop('disabled')) {
srcsubmit_zone.hide();
}
// Get the button dimentions and position
var srcsubmitDimention = {
height: srcsubmit.outerHeight(true),
width: srcsubmit.outerWidth(true),
top: srcsubmit.offset().top,
left: srcsubmit.offset().left
}

// Place the "zone" div over the button
srcsubmit_zone.css({
"height":srcsubmitDimention.height,
"width":srcsubmitDimention.width,
"left": srcsubmitDimention.left,
"top": srcsubmitDimention.top
});

// Instantiate Tipso normally
srcsubmit_zone.tipso({
position: 'right',
titleContent: 'Search Button Disabled',
content: 'This field cannot be modified',
background: '#889eb0',
titleBackground: '#63a9e4',
color: 'white',
width: 275,
size: 'default'
});
});

#srcsubmit-zone{
display: inline-block;
background-color: rgba(255,0,0,0.4);  /* Just for you to see it's over the button */
position: absolute;
cursor: help;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.min.js"></script>
<input type="text" class="srcBox" id="srcBox" name="srcBox" />
<input type="button" class="srcsubmit btn-primary" id="srcsubmit" Value="Search" disabled/>
<div id="srcsubmit-zone"></div>
<div class="srchBoxError"></div>
<br />
<br />
<input type="text" class="srcBoxRslt" id="srcBoxRslt" name="srcBoxRslt" />
<input type="button" class="srcRslt btn-primary" id="srcRslt" Value="Return" />
<div class="dstrBoxError"></div>