鼠标悬停事件未正确触发

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

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

所以这是一个微调的绕行。
您将使用一个绝对定位的 div（在这个演示中是半透明的红色......让您看到它）放置在禁用按钮的正上方。在那个 div 上，您将实例化 Tipso...而不是在按钮上。

现在您只需要 show/hide 那个 div 而 enabling/disabling 按钮。它仅作为 Tipso 的 "mouse event zone"。

听起来不错？

$(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>

Answer 2

如果您使用 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

希望对您有所帮助！

鼠标悬停事件未正确触发

Mouseover event not firing correctly

jquery

tooltip