jQuery 巧用 on 方法为 pre 标签添加 mousemove 事件，实时输出鼠标坐标！

在 jQuery 中，可以使用 `on()` 方法为 `pre` 标签添加 `mousemove` 事件。以下是具体的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <title>jQuery mousemove event on pre</title> <style> pre { background-color: #f4f4f4; padding: 10px; } </style> </head> <body> <pre> This is a pre tag. You can move your mouse over it. </pre> <script> $(document).ready(function () { // 为 pre 标签添加 mousemove 事件 $('pre').on('mousemove', function (event) { // 当鼠标在 pre 标签内移动时，在控制台输出鼠标的坐标 console.log('Mouse X: ' + event.pageX + ', Mouse Y: ' + event.pageY); }); }); </script> </body> </html> ``` 代码解释： 1. 引入 jQuery 库：通过 `<script>` 标签引入 jQuery 库，这里使用的是 jQuery 3.6.0 版本。 2. HTML 结构：创建一个 `pre` 标签，里面包含一些文本内容。 3. jQuery 代码： - `$(document).ready()` 函数确保页面加载完成后再执行代码。 - 使用 `$('pre')` 选择所有的 `pre` 标签。 - 使用 `on('mousemove', function(event) {... })` 方法为 `pre` 标签添加 `mousemove` 事件。 - 在事件处理函数中，通过 `event.pageX` 和 `event.pageY` 获取鼠标的坐标，并将其输出到控制台。当你将鼠标移动到 `pre` 标签上时，控制台会不断输出鼠标的坐标信息。 ######[AI问答 | 520点数解答 | 2025-09-05 17:02:06]

服务商

更多选项

快捷项

自定义