2018年5月13日 星期日

[JavaScript] 滑鼠事件中取得滑鼠位置

在滑鼠事件中,從參數ev我們可以找到ev.target,表示滑鼠的作用對象,其中ev.target.getBoundingClientRect()會回傳一個rect,這個rect包含了x、y、left、right、top、bottom、width、height,表示的是元件的位置和長寬,滑鼠的位置在ev.pageX和ev.pageY,用他減去rect.x和rect.y就行了。
補充,如果目標元件是position: fixed的話,使用ev.pageX、ev.pageY就會有問題,因為這兩個是滑鼠之於整個document的相對位置,而上面所得到的rect是元件之於視窗的位置。為了拿到滑鼠相對於視窗的位置我們可以使用ev.clientX與ev.clientY。有人會騙你去用screenX、screenY,這兩個是相對於螢幕的,與client會有些差距。

[HTML] ribody

怕自己忘記,稍微紀錄一下。 各種各種理由(其中一個就是Vue,不能綁定在body上),導致時常需要一個包在body中的div,當作body來用,像這樣: === <body>     <div id="divBody">   ...