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

如果您正在使用private void HistoryButton_Click(object sender, RoutedEventArgs e) { foreach (Device foo in ConfigurationParameterCollection) { Console.WriteLine("Value for {0}: {1}", foo.Name, foo.OriginalValue); foo.Commit(); } }浏览器，则即使元素被禁用，也可以使用鼠标事件。但这不适用于其他浏览器（特别是chrome）。

您的问题的解决方案：

问题是.table-x-scroll { display: block; overflow-x: auto; white-space: nowrap; margin : 0 auto }插件仅在第一个myForm.setValues(record);动作中定义。然后只有下一个firefox才开始工作。因此，您需要将tipso代码定义放在mouseover函数本身中。

只需将mouseover代码定义放在tipso事件之外，就像下面的代码片段一样。

代码段：

ready

Fiddle DEMO

希望这会有所帮助！

Answer 2

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

这是笨拙的漫游。
您将使用绝对定位的div（在此演示中为半透明红色，供您查看），将其放置在禁用按钮的正上方。在该div上，您将实例化Tipso ...不在按钮上。

现在，您只需要在启用/禁用按钮时显示/隐藏该div。它只是Tipso的“鼠标事件区域”。

听起来不错？

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

Mouseover事件无法正确触发

2 个答案: