首頁 web前端 js教程 js取得滑鼠點擊的位置實現想法及程式碼_javascript技巧

js取得滑鼠點擊的位置實現想法及程式碼_javascript技巧

May 16, 2016 pm 04:49 PM
滑鼠點擊

copy來的,但是原頁面的程式碼還是需要修改,下面是修改可用的

常用的是event.clientX和event.clientY分別取得橫向的和縱向的位置,但僅使用這個方法是不夠的,因為event.clientX和event.clientY取得的滑鼠位置是相對於目前畫面的,而不考慮頁面的捲軸所滾動的距離。

複製程式碼 程式碼如下:

function pointerX(event)
{
return event.pageX || (event.clientX (document.documentElement.scrollLeft || document.body.scrollLeft));
}

function pointerY(event)
{
return eventf .pageY || (event.clientY (document.documentElement.scrollTop || document.body.scrollTop));
}

兩個方法分別獲得相對整個頁面(而不是螢幕)的滑鼠位置

event.pageX是在FF中所支援的,這樣就實作了跨瀏覽器操作

只需在其他方法中呼叫這兩個函數就可
複製程式碼 程式碼如下:

function getPointPosition(event)
{ event.clientX;
var y_px_scr = event.clientY;
alert("相對於目前畫面的X軸偏移" x_px_scr);//相對於裝置(PC或行動裝置)
alert("相對於目前螢幕的Y軸偏移量" y_px_scr);//相對於裝置(PC或行動裝置)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相對於整個頁面的X軸偏移" x_Px_page); //相對於瀏覽器
alert( "相對於整個頁面的Y軸偏移" y_Px_page); //相對於瀏覽器
}

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles