Make-Button anklickbar nur wenn der Cursor innerhalb div

Question

Ich habe ein div über JS mit einer Schaltfläche erzeugt, die ich nur mit einer Maus anklickbar machen möchte, sollte keine manuelle Verknüpfung folgenden möglich sein.

F1: Gibt es eine Möglichkeit, die Schaltfläche nur anklickbar zu machen, wenn sich der Mauszeiger innerhalb der div befindet?

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

Um aus folgendem Link wie iMacros automatisierte Skripte zu verhindern, habe ich die „Hash“ Variable auf den Link-Namen und Klasse hinzugefügt, die nun zufällig ist. Trotzdem können sie dem Link folgen, indem sie im Makroskript einen * Platzhalter hinzufügen. Also ich habe hier keine Ideen.

Q2: Gibt es eine definitive Möglichkeit, die Linkverfolgung auf die Maus zu beschränken?

Answer 1

Also hier ist, wie ich es für mich gemacht Arbeit:

1)

2) Entfernen Sie den Link, um die Schaltfläche in einem unsichtbaren Elemente Wickel und über das Ereignis Onclick hinzufügen

3) Deaktivieren Sie die Taste standardmäßig

4) Entfernen Sie das unsichtbare Element, das al so löst die erneute Aktivierung der Behinderten-Taste innerhalb des Ziel div:

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

diese Weise wird die Taste nicht mehr gezielt oder aktiviert werden kann, wenn der Mauszeiger darüber platziert ist. Ich habe bereits aktuelle iMacro-Skripte geschlagen, damit dies jetzt funktioniert.

LE: Spricht zu früh, scheint iMacros war in der Lage, den Knopf ziemlich leicht zu zielen. Allerdings kam ich auch durch Hinzufügen eines einfachen Timeout für meine Funktion mit einer schnellen Lösung auf:

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

Vielen Dank für alle Eingänge hier, die gehen hielt mich wirklich.

Answer 2

Fügen Sie einen Ereignishandler auf Ihrem div mit AddEventListener und dem mouseover event hinzu.

Wenn das Ereignis ausgelöst wird, fügen Sie die href attr zu Ihrer <a> Verbindung hinzu. Und entfernen Sie den Attr bei Mouseout.

Answer 3

Verwenden Sie das nicht <a href inside it>, verwenden Sie Javascript onclick oder jquery on

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

Answer 4

Wahrscheinlich so etwas wie dies funktionieren kann. Grundsätzlich beobachten Sie die Cursorposition bei jedem Klick und prüfen Sie, ob es innerhalb $('#demo-box') ist. Ansonsten können Sie e.stopPropagation() und/oder e.preventDefault().

Nicht sicher, ob dies funktioniert, weil ich nicht weiß, ob Makroskripte tatsächlich die Maus bewegen. Wenn dies der Fall ist, können Sie die Klicks kürzer als 20-30 ms drosseln oder entprellen. Weitere Informationen zum Entprellen here.

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); 
    } 
});