web-dev-qa-db-ja.com

子要素に関するJavaScriptのマウスオーバー/マウスアウトの問題

私はこの小さな問題を抱えています、そして私はあなたの助けを求めています。 div要素があり、その中にimg要素があります。

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
        // Here I have some code that makes the "child" visible
    }

    function MyFuncOut() {
        // Here I have some code that makes the "child" invisible again
    }
</script>

ご覧のとおり、画像はdivの子です。 divを離れるときだけ、子が消えることを望んでいます。それでも、画像の上にマウスを移動すると、MyFuncOut（）関数が呼び出されるように見えます（なぜなら、私はdivを画像にカーソルを合わせる）。私はそれが起こらないようにしたい。 MyFuncOut（）関数は、div領域を離れたときにのみ呼び出されるようにします。

子コントロールの上にマウスを移動すると、その親がmouseoutイベントを呼び出すことを知りませんでした（私が子の上にいる場合でも、私も親の上にいます）。私はこれに閉じ込められており、あなたの良いアドバイスが少し必要です。ありがとう！

[〜＃〜]変更[〜＃〜]

OK。子を「マウスアウト」すると、イベントバブリングは「マウスアウト」イベントを親に送信しません。また、子を「マウスオーバー」したときに、「マウスオーバー」イベントを親に送信しません。それは私が必要なものではありません。子を「マウスオーバー」したときに、親の「マウスアウト」イベントが送信されないようにする必要があります。それを得る？イベントバブリングは、たとえば、子のクリックイベントを親に伝播させたくない場合に役立ちますが、これは私の場合ではありません。奇妙なことに、同じ親の中に他の要素があり、それらを「マウスオーバー」したときに親の「マウスアウト」イベントを発生させません。

javascriptparent-childmouseovermouseout
11
ali

jqueryで利用可能な「mouseenter」および「mouseleave」イベントを使用できます。以下のコードは次のとおりです。

$(document).ready(function () {
        $("#parent").mouseenter(function () {
            $("#child").show();
        });
        $("#parent").mouseleave(function () {
            $("#child").hide();
        });
    });

上記はイベントを添付することです、

<div id="parent">
    <img id="child" src="button.png" style="display:none;" />
</div>
24
Vishal Gowda

以下のソリューションを使用できます。これは純粋なJavaScriptであり、私は成功裏に使用しました。

var container = document.getElementById("container");
var mouse = {x: 0, y: 0};

function mouseTracking(e) {
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
    var containerRectangle = container.getBoundingClientRect();

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
            mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) {
        // Mouse is inside container.
    } else {
        // Mouse is outside container.
    }
}
document.onmousemove = function () {
    if (document.addEventListener) {
        document.addEventListener('mousemove', function (e) {
            mouseTracking(e);
        }, false);
    } else if (document.attachEvent) {
        // For IE8 and earlier versions.
        mouseTracking(window.event);
    }
}

お役に立てば幸いです。

6
Pedro Alvares

ターゲットが画像ではないことを確認するifステートメントをMyFuncOut関数に追加するだけです

if (event.target !== imageNode) {
     imageNode.style.display = 'none'
}
3
Jake

私もこれに問題があり、動作させることができませんでした。これは私が代わりにしたことです。それははるかに簡単でJavaScriptではないので、より高速でオフにすることはできません。

div.container {
    opacity:0.0;
    filter:alpha(opacity="00");
}

div.container:hover {
    opacity:1.0;
    filter:alpha(opacity="100");
}

不透明度のCSS3トランジションを追加して、よりスムーズな感触を与えることもできます。

1
Spencer May

子要素pointer-event：noneのcssを設定するだけです。例を参照してください。

#parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

#child {
  width: 200px;
  pointer-events: none; # this does the trick
}
<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
      console.log("mouse over")
    }

    function MyFuncOut() {
      console.log("mouse out")
    }
</script>
0
Keyang