Question

我正在使用JavaScript将MAP标签中使用的鼠标事件与智能手机上的触摸事件绑定在一起。这意味着，如果用户在智能手机上触摸图像地图的区域，则该地图区域的鼠标悬停事件应立即触发。我已经阅读了关于stackoverflow的所有建议，但都没有奏效。

控制台错误：

handheld.js:167 Uncaught TypeError: document.bind is not a function
    at HTMLAreaElement.<anonymous> (handheld.js:167)

我的JavaScript代码：

var mydiv = document.getElementById('div4');
mydiv.addEventListener('touchstart', function (e) {
    // stop touch event
    e.stopPropagation();
    e.preventDefault();
    document.bind("mouseover", e)
    onmouseover.call(this, e);  //substitute onmouseover event for exact same result as touchstart 
}, false);

在我的HTML中调用该事件的位置：

        <map id="maptree" name="maptree"> <%-- The name attribute is neccessary for the mapping to work. --%>
            <area id="ar1" shape="poly" coords="3,390,13,381,66,371,113,351,172,313,193,290,217,273,242,259,297,238,344,222,394,213,461,206,521,202,588,205,638,208,694,221,751,249,800,289,835,340,852,397,849,435,815,494,781,526,767,543,728,566,670,586,614,593,521,597,467,590,386,585,309,565,276,554,253,542,228,537,174,503,113,464,76,438,36,416,6,398,4,394" alt="Love" onmouseover="change1()" href="/handheld/terms.htm" />
            <area id="ar2" shape="poly" coords="1990,389,1967,376,1929,373,1879,351,1846,334,1814,308,1786,279,1705,243,1636,220,1549,210,1475,203,1399,204,1331,212,1267,232,1213,268,1179,303,1155,336,1138,390,1138,419,1153,462,1191,510,1226,545,1305,581,1368,593,1448,597,1540,587,1610,586,1674,566,1737,545,1775,530,1841,487,1913,440,1949,416,1968,414,1991,392" alt="Family" onmouseover="change2()"  href="/handheld/terms.htm" />
            <area id="ar3" shape="poly" coords="0,849,32,835,73,827,123,806,156,779,188,749,227,723,292,699,358,676,426,667,517,662,609,664,654,671,727,692,770,721,807,755,834,796,850,842,852,880,845,906,814,952,776,993,736,1017,689,1038,635,1051,573,1054,494,1053,435,1045,384,1043,328,1030,272,1013,256,1003,218,993,186,968,149,944,118,924,92,906,66,890,47,878,22,867" alt="Friend" onmouseover="change3()"  href="/handheld/terms.htm" />
            <area id="ar4" shape="poly" coords="1987,848,1972,837,1919,826,1868,805,1812,760,1773,728,1668,684,1585,669,1492,661,1385,662,1301,675,1225,712,1178,760,1158,794,1137,853,1143,896,1180,959,1224,1000,1294,1039,1365,1050,1470,1055,1552,1045,1615,1040,1677,1023,1757,996,1815,963,1876,925,1924,890,1969,866,1991,848,1985,850" alt="Colleaque" onmouseover="change4()"  href="/handheld/terms.htm" />
            <area id="ar5" shape="poly" coords="0,1305,16,1295,55,1290,109,1266,139,1253,172,1226,208,1193,253,1171,315,1145,388,1128,480,1117,582,1119,644,1124,701,1141,758,1168,808,1211,835,1257,853,1310,847,1359,796,1428,750,1468,713,1487,645,1509,556,1509,493,1509,432,1505,368,1497,317,1482,265,1467,231,1453,187,1429,73,1352,43,1335,21,1326,6,1312" alt="Business" onmouseover="change5()"  href="/handheld/terms.htm" />
            <area id="ar6" shape="poly" coords="1987,1302,1960,1293,1914,1281,1865,1262,1815,1222,1777,1191,1692,1154,1614,1130,1520,1121,1409,1117,1331,1126,1280,1145,1216,1178,1177,1225,1159,1251,1140,1302,1138,1323,1145,1358,1174,1409,1222,1456,1263,1481,1330,1503,1373,1510,1463,1512,1539,1503,1606,1500,1667,1485,1707,1476,1732,1460,1771,1449,1827,1412,1909,1355,1980,1319" alt="Educator/Learner" onmouseover="change6()"  href="/handheld/terms.htm" />
            <area id="ar7" shape="poly" coords="47,3567,995,3069,1952,3569,1839,3569,1839,3568,1772,3569" alt="Registration" onmouseover="change7()" href="/handheld/terms.htm" />
        </map>

将移动触摸事件与鼠标事件绑定

0 个答案: