Question

我建立了一个“ CommentCard”，它是一个包装在Rect中的文本框，其中还包含其他内容。当鼠标退出文本框时，其内容将保存在一个变量中，该变量稍后将传递给服务器。

我使用“ mouseout”事件检测出口，其方式类似于下面的小提琴。而且效果很好。

有时（实际上很少），不会触发mouseout；我无缘无故辨认。 Chrome似乎比Firefox发生的更多。这很难用小提琴来证明...

但有时，仅由于按下了其中一个鼠标按钮或手指刷了触摸板，并不会触发mouseout。这很容易弄弄。

问题：是否有办法确保仅在鼠标离开盒子的情况下才将鼠标移开？（无需考虑按钮或按键或其他任何东西）

var countRect = 0;
var countTextbox = 0;

var canvas = new fabric.Canvas('c');
var wrapper = new fabric.Rect({
  left: 5,
  top: 5,
  fill: 'yellow',
  width: 150,
  height: 40,
  selectable: false
});
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  fill: 'red',
  width: 20,
  height: 20,
  selectable: false
});
var textbox = new fabric.Textbox("hello",{
  left: 50,
  top: 10,
  width: 100,
  height: 20,
  // cursor
  hoverCursor: 'pointer',
  cursorColor: 'red',
  cursorDelay: 250,
  cursorDuration: 250,
  cursorWidth: 2,
  // text
  fill: 'red',
  stroke: 'red',
  strokeWidth: 1,
  fontFamily: 'Arial',
  fontSize: 16,
  fontStyle: 'normal',
  backgroundColor: 'lightblue',
  // other
  selectable: false
});

rect.on("mouseout",function() {
  countRect++;
  $("#view_countRect").html(countRect);
});

textbox.on("mouseout",function() {
  countTextbox++;
  $("#view_countTextbox").html(countTextbox);
  textbox.exitEditing();
});

canvas.add(wrapper);
canvas.add(rect);
canvas.add(textbox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="c" height=50 width=200 style="border: thin black dashed"></canvas>
<div>
  <p>out of rect</p>
  <p id="view_countRect">0</p>
</div>
<div style="position:absolute; display:inline">
  <p>out of textbox</p>
  <p id="view_countTextbox">0</p>
</div>

fiddle: mouseout and mouse button

文本框鼠标移出有时不会触发

0 个答案: