âæºè½âå·¥å ·æç¤º
ç¼åä¸ä¸ªå½æ°ï¼è¯¥å½æ°ä» å¨è®¿é®è å°é¼ æ ç§»è³ å ç´ è䏿¯ ç§»è¿ å ç´ çæ åµä¸ï¼å¨è¯¥å ç´ ä¸æ¾ç¤ºå·¥å ·æç¤ºã
æ¢å¥è¯è¯´ï¼å¦æè®¿é®è å°é¼ æ ç§»è³å ç´ ä¸ï¼å¹¶å䏿¥ ââ æ¾ç¤ºå·¥å ·æç¤ºã妿ä»ä»¬åªæ¯å°é¼ æ ç§»è¿å ç´ ï¼é£å°±æ²¡å¿ è¦æ¾ç¤ºï¼è°æ³è¦å¤ä½çéªçå¢ï¼
仿æ¯ä¸è¯´ï¼æä»¬å¯ä»¥æµéå ç´ ä¸çé¼ æ ç§»å¨é度ï¼å¦æéåº¦å¾æ ¢ï¼é£ä¹æä»¬å°±åå®å® å¨å ç´ ä¸ï¼å¹¶æ¾ç¤ºå·¥å ·æç¤ºï¼å¦æé度å¾å¿« ââ é£ä¹æä»¬å°±å¿½ç¥å®ã
为æ¤ï¼æä»¬å建ä¸ä¸ªéç¨å¯¹è±¡ new HoverIntent(options)ã
å
¶ optionsï¼
elemââ è¦è·è¸ªçå ç´ ãoverââ é¼ æ ç§»å¨å°å ç´ ä¸æ¶è¦è°ç¨ç彿°ï¼å³ï¼é¼ æ å¨å ç´ ä¸çç§»å¨éåº¦å¾æ ¢ï¼æè åå¨è¯¥å ç´ ä¸ãoutââ å½é¼ æ 离å¼å ç´ æ¶è°ç¨ç彿°ï¼å¦æoverå·²ç»è¢«è°ç¨è¿äºï¼ã
å¨å·¥å ·æç¤ºä¸ä½¿ç¨æ¤ç±»å¯¹è±¡ç示ä¾ï¼
// ä¸ä¸ªç®åçå·¥å
·æç¤º
let tooltip = document.createElement('div');
tooltip.className = "tooltip";
tooltip.innerHTML = "Tooltip";
// 该对象å°è·è¸ªé¼ æ ï¼å¹¶è°ç¨ over/out
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
document.body.append(tooltip);
},
out() {
tooltip.remove();
}
});
示ä¾ï¼
å¦æä½ å°é¼ æ å¿«éå°ä»âæ¶éâä¸ç§»å¨è¿å»ï¼é£ä¹ä»ä¹é½ä¸ä¼åçï¼å¦æä½ 使ç¨é¼ æ å¨âæ¶éâ䏿 ¢æ ¢ç§»å¨ï¼æè åå¨âæ¶éâä¸ï¼åä¼åºç°ä¸ä¸ªå·¥å ·æç¤ºã
请注æï¼å½é¼ æ æéå¨âæ¶éâçå ç´ ä¹é´ç§»å¨æ¶ï¼å·¥å ·æç¤ºä¸ä¼âéªçâ
ç®æ³çèµ·æ¥å¾ç®åï¼
- å°
onmouseover/outå¤çç¨åºæ¾å¨å ç´ ä¸ãå¨è¿éä¹å¯ä»¥ä½¿ç¨onmouseenter/leaveï¼ä½æ¯å®ä»¬çéç¨æ§è¾å·®ï¼å¦ææä»¬æ³å¼å ¥äºä»¶å§ææ¶ï¼å®åæ æ³ä½¿ç¨ã - å½é¼ æ æéè¿å
¥å
ç´ æ¶ï¼å¼å§æµé
mousemoveä¸çé度ã - 妿é度æ
¢ï¼åè¿è¡
overã - 彿们çé¼ æ æéè¦ç§»åºå
ç´ ï¼å¹¶ä¸
over乿§è¡äºï¼åä¼è¿è¡outã
使¯å¦ä½æµéé度ï¼
第ä¸ä¸ªæ³æ³æ¯ï¼æ¯ 100ms è¿è¡ä¸æ¬¡å½æ°ï¼å¹¶æµéååæ åæ°åæ ä¹é´çè·ç¦»ã妿å¾å°ï¼é£ä¹é度就å¾å°ã
ä¸å¹¸çæ¯ï¼å¨ JavaScript 䏿 æ³è·åâé¼ æ å½ååæ âãæ²¡æå getCurrentMouseCoordinates() è¿æ ·ç彿°ã
è·ååæ çå¯ä¸æ¹æ³æ¯çå¬ä¾å¦ mousemove è¿æ ·çé¼ æ äºä»¶ã
å æ¤ï¼æä»¬å¯ä»¥å¨ mousemove ä¸è®¾ç½®ä¸ä¸ªå¤çç¨åºæ¥è·è¸ªåæ å¹¶è®°ä½å®ä»¬ãç¶åææ¯ 100ms æ¯è¾ä¸æ¬¡ã
P.S. 请注æï¼è§£å³æ¹æ¡æµè¯ä½¿ç¨ dispatchEvent æ¥æ£æ¥å·¥å
·æç¤ºæ¯å¦æ£ç¡®ã