酷代码 AI
菜单
服务商

jquery给pre标签添加mousemove事件 on

在 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"> <!-- 引入 jQuery 库 --> <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` 标签上时,控制台会不断输出鼠标的坐标信息。 [2025-09-05 17:02:06 | AI问答 | 520点数解答]

相关提问
聚合导航,免费问AI
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]