Question

我有一个 textarea ，当它聚焦时，我想在该文本附近显示一个按钮。

我的流程是：

<div class="div_textarea col-lg-6">
  <button class="button pull-right invisible" type="button">click</button>
  <textarea rows="4" cols="50">Test</textarea>
</div>

将textarea和按钮放在相同的DIV中：

点击测试

使用JS隐藏并使按钮可见：

$(document).ready(function() {
  $(".div_textarea").focusin(function() {
    $(this).find('button').css('visibility', 'visible');
  });
  $(".div_textarea").focusout(function() {
    $(this).find('button').css('visibility', 'hidden');
  });
});

问题：

单击按钮时，由于首先隐藏按钮，因此不会发生单击事件。我该怎么做才能解决这个问题？

JSFiddle here。

编辑：

我已经用它来解决一些用户所说的问题：

$(".div_textarea").focusin(function() {
  $(this).find('button').css('visibility', 'visible');
});
$(".div_textarea").focusout(function() {
  $(".div_textarea").mouseleave(function() {
    $(this).find('button').css('visibility', 'hidden');
  })
});

Answer 1

我甚至不会使用var canvas = document.getElementById("diodeCircuit"); var ctx = canvas.getContext("2d"); var voltage = 0; function runCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); changeVoltage(); } function changeVoltage() { window.addEventListener("click", doMouseClick, false); function doMouseClick(event) { x = event.pageX - canvas.offsetLeft; y = event.pageY - canvas.offsetTop; if (x >= 0 && x <= 1000 && y >= 0 && y <= 400) { voltage += 1; } } ctx.fillStyle = "#000"; ctx.textAlign = "center"; ctx.font = "30px sans-serif"; ctx.fillText(voltage + " V", 500, 50); } setInterval(runCanvas, 100);，这太复杂了，你似乎并不需要它。让focusout处理反向状态会更好。这也会减少你的代码行。

试试这个：

.button

这是一个有效的fiddle

Answer 2

您可以使用mouseenter（）和mouseleave（）代替focusin / out吗？

$( document ).ready(function() {
    $(".div_textarea").mouseenter(function() {
        $(this).find('button').css('visibility','visible');
    });

    $(".div_textarea").mouseleave(function() {
        $(this).find('button').css('visibility','hidden');
    });

  $("button").click(function(){
    alert("foo");
  });
});

在被JS隐藏之前单击按钮

2 个答案: