仅当光标位于div内时，使按钮可单击

Question

我有一个通过JS生成的div，其中有一个按钮，我只想用鼠标单击即可，后面没有任何手动链接。

问题1：是否只有在鼠标光标位于div内时，才能使按钮可单击？

<div class='modal-body' style='padding-top: 10px'>
<a href='?hash="+hash+"' class='btn btn-success btn-xs cbut "+hash+"'><span class='glyphicon glyphicon-forward "+hash+"'></span></a>
</div>

为了防止自动化脚本跟踪诸如iMacros之类的链接，我在链接名称和类中添加了“ hash”变量，该变量现在是随机的。 即使这样，他们也可以通过在宏脚本中添加*通配符来跟随链接。 所以我不在这里的想法。

Q2：是否有确定的方法将链接限制为仅鼠标以下？

Answer 1

使用AddEventListener和mouseover事件在您的div上添加事件处理程序。

触发事件后，将href属性添加到您的<a>链接。 并在mouseout上删除attr。

Answer 2

不要使用<a href inside it> ，使用JavaScript onclick ，或jQuery的on

$('div.modal-body').on('click',function(){
    window.location = "yourlink"
})

Answer 3

大概这样的事情可能会起作用。 基本上，您会观察每次单击的光标位置，并检查它是否在$('#demo-box') 。 否则，您可以e.stopPropagation()和/或e.preventDefault() 。

不知道这是否行得通，因为我不知道宏脚本是否真正移动了鼠标。 如果是这样，您可以在20到30毫秒之内缩短或消除咔嗒声。 有关在此处弹跳的更多信息。

var $demo_box = $('#demo-box');
var demo_box_width: $demo_box.outerWidth();
var demo_box_height = $demo_box.outerHeight();
var demo_box_offset = $demo_box.offset();

$("#button").on('click', function(e) {
    var relativeX = (e.pageX - demo_box_offset.left);
    var relativeY = (e.pageY - demo_box_offset.top);

    if (relativeX > 0 && relativeY > 0 && relativeX < demo_box_width && relativeY < demo_box_height) {
        alert("X: " + relativeX + "  Y: " + relativeY);
    }
});

Answer 4

因此，这就是我如何使其适用于我：

1）将按钮包装在不可见的元素内

2）删除链接并通过onclick事件添加它

3）默认禁用按钮

<span style="position:relative;">
<input type="button" onclick="document.location.href='?hash'" class="btn btn-success btn-xs" value="❯❯">
<div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: default; display: none;" id="catch"></div>
</span>

4）从目标div中删除不可见元素，该不可见元素也会触发禁用按钮的重新启用：

$("#catch").mouseover(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

这样，除非将鼠标光标放在按钮上，否则就无法再将其定位或激活。 我已经击败了当前的iMacro脚本，所以现在就可以了。

LE：说得太早了，似乎iMacros能够很轻松地将按钮定位到目标。 但是，我还通过为函数添加一个简单的超时来快速解决问题：

$("#catch").mouseover(function (evt) {
    var $this = $(this)
    setTimeout(function () {
    $this.hide().prev("input[disabled]").prop("disabled", false).focus();
    }, 1000);
});

感谢您在这里的所有投入，这确实让我前进。