1 Востаннє редагувалося Wsewlad (10.08.2016 19:03:51)

Тема: При затисненій миші в Firefox не спрацьовує onmouseenter.

У Firefox, при затисненій лівій клавіші миші ( подія onmousedown)  не спрацьовує подія onmouseenter , а в Chrom-і працює. Чому так, і як зробити, щоб запрацювало в Firefox?

<table>
    <tr><td><input onmousedown="onmousedown_color(1)" onmouseenter="onmouseenter_color(1)"/></td>
    <td><input onmousedown="onmousedown_color(1)" onmouseenter="onmouseenter_color(1)"/></td></tr>
    <tr><td><input onmousedown="onmousedown_color(2)" onmouseenter="onmouseenter_color(2)"/></td>
    <td><input onmousedown="onmousedown_color(2)" onmouseenter="onmouseenter_color(2)"/></td></tr>
</table>
<script>
    function onmousedown_color(n) {
        console.log(n);
    }

    function onmouseenter_color(m) {
        console.log(m);
    }
</script>

2 Востаннє редагувалося Yola (11.08.2016 08:50:50)

Re: При затисненій миші в Firefox не спрацьовує onmouseenter.

Firefox вважає, що ви перетягуєте елемент сторінки, тому й не викликає обробник onmouseenter.

<head>
<style>
input{
  background: transparent;
  user-drag: none; 
  user-select: none;
}
</style>
</head>
<body>
<table>
    <tr><td><input onmousedown="d(1)" onmouseenter="e(1)"/></td>
    <td><input onmousedown="d(1)" onmouseenter="e(1)"/></td></tr>
    <tr><td><input onmousedown="d(2)" onmouseenter="e(2)"/></td>
    <td><input onmousedown="d(2)" onmouseenter="e(2)"/></td></tr>
</table>
<script>
    function d(n) {
        console.log("down " + n);
    }
 
    function e(m) {
        console.log("enter " + m);
    }
</script>
</body>
Прихований текст

Навіщо писати дві функції, якщо їхній код однаковий? Також, коли функції використовуються так локально, то для кращої читності коду варто давати коротші імена ;)

Подякували: leofun01, Wsewlad2

3

Re: При затисненій миші в Firefox не спрацьовує onmouseenter.

Попередній код не спрацював.  user-drag: none; - не підтримується в Firefox, а ось так працює)

    <head>
    <style>
    input{  
      -moz-user-select: none;
    }
    </style>
    </head>
    <body>
    <table>
        <tr><td><input onmousedown="d(1)" onmouseenter="e(1)"/></td>
        <td><input onmousedown="d(1)" onmouseenter="e(1)"/></td></tr>
        <tr><td><input onmousedown="d(2)" onmouseenter="e(2)"/></td>
        <td><input onmousedown="d(2)" onmouseenter="e(2)"/></td></tr>
    </table>
    <script>
        function d(n) {
            console.log("down " + n);
        }
     
        function e(m) {
            console.log("enter " + m);
        }
    </script>
    </body>
Подякували: Yola1