将添加的代码写进html，还有鼠标放开不清除选中<div>

时间: 2023-12-08 22:03:57 浏览: 186

鼠标移动div时禁止选中div中的文字的方法

在网页开发过程中，有时我们需要创建可拖动的div元素，但在这个过程中，用户可能会无意间选中div内的文字，这不仅影响用户体验，也可能对div的移动造成干扰。为了解决这个问题，我们可以采用CSS和JavaScript的方式来禁止div中的文字被选中。我们可以使用CSS样式来禁止文字选中。一种通用的跨浏览器的解决方案是使用`user-select`属性。这个属性允许我们控制元素及其子元素是否可被用户选中。在CSS中添加以下样式： ```css html, body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } ``` 这里的`-moz-user-select`, `-webkit-user-select`, `-ms-user-select`分别是针对Firefox, Chrome/Safari 和 Internet Explorer 的前缀版本，而`user-select: none`则是标准的写法。这些样式设定后，整个页面的元素将无法被选中，包括div中的文字。然而，有时候我们可能希望特定的元素（如input输入框）仍然允许用户进行文字选择。这时，可以使用`unselectable`属性，这是一个非标准的IE特有属性。对于需要禁选的div，可以这样设置： ```html <div unselectable="on" onselectstart="return false;">  </div> ``` 同时，为了兼容其他浏览器，可以使用JavaScript的`onselectstart`事件来阻止文本选择： ```javascript document.getElementById('yourDiv').onselectstart = function() { return false; }; ``` 这段代码会监听div的`selectstart`事件，并返回`false`以阻止默认的文本选择行为。关于`-moz-user-select`的三个属性值： 1. `none`：所有子元素的文字都不能被选中，包括input输入框中的文字。 2. `-moz-all`：所有子元素的文字都可以被选中，但input输入框中的文字除外。 3. `-moz-none`：所有子元素的文字都不能被选中，input输入框中的文字也不例外。综合以上，通过CSS和JavaScript的结合，我们可以有效地在鼠标移动div时禁止选中div中的文字，从而保证div移动的流畅性。这在创建交互式用户界面或拖放功能时尤其有用，可以提供更好的用户体验。

以下是您要求的修改后的代码： ```html <!DOCTYPE html> <html> <head> <title>MathJax Example</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <style> .mathjax-formula { font-size: 2.8em; background-color: green; position: absolute; left: 0; top: 0; cursor: move; padding: 5px; border-radius: 5px; color: white; } </style> </head> <body> <div id="mathjax-formulas-container"></div> <script> var formulas = []; var selectedDiv = null; var offsetX = 0; var offsetY = 0; document.addEventListener("click", function(event) { var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode) { var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = event.clientX + "px"; newFormula.style.top = event.clientY + "px"; newFormula.innerText = latexCode; mathjaxFormulasContainer.appendChild(newFormula); formulas.push({ latexCode: latexCode, position: { x: event.clientX, y: event.clientY } }); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); } } }); }); document.addEventListener("mousedown", function(event) { if (event.target.classList.contains("mathjax-formula")) { selectedDiv = event.target; offsetX = event.clientX - parseInt(selectedDiv.style.left); offsetY = event.clientY - parseInt(selectedDiv.style.top); } }); document.addEventListener("mousemove", function(event) { if (selectedDiv) { selectedDiv.style.left = event.clientX - offsetX + "px"; selectedDiv.style.top = event.clientY - offsetY + "px"; } }); document.addEventListener("mouseup", function() { // Do nothing. Keep the selected div as it is. }); </script> </body> </html> ``` 这段代码在已有的基础上添加了以下功能： - 鼠标按下事件（mousedown）：当用户按下鼠标时，如果点击的是<div>元素，则记录选中的<div>元素，并计算鼠标位置与<div>元素左上角的偏移量。 - 鼠标移动事件（mousemove）：当用户按下鼠标并移动时，如果有选中的<div>元素，则根据鼠标位置和偏移量来更新<div>元素的位置。 - 鼠标放开事件（mouseup）：当用户释放鼠标时，不执行任何操作，保持选中的<div>元素不变。这样修改后，选中的<div>元素将保持其位置，直到再次点击其他位置或拖动该元素。

阅读全文

将添加的代码写进html，还有鼠标放开不清除选中<div>

相关推荐

html中div不自动换行、强制不换行的具体实现

上述html通过双击就可以在鼠标点击的位置释放剪切板上的latex代码，点击选中画布上的，鼠标移动选中的,鼠标放开停止移动

JQUERY选择器 id选择器 2) $('.class') css选择器,class类名

JS鼠标右键移动批量选中代码

鼠标移上显示一个div的代码

jQuery鼠标上下拖动div排序代码

js实现鼠标拖拽缩放div实例代码

jQuery下拉菜单选中添加代码

div随鼠标移动.html

div css鼠标悬停图片细节说明特效代码

js按住鼠标左键选中元素框代码

鼠标拖动div

jquery鼠标拖动层DIV源代码精简整理版

可以用鼠标拖动的DIV实现思路及代码

js判断鼠标同时离开两个div的思路及代码

div css鼠标悬停图片细节说明代码.zip

给DIV添加滚动条的实现代码

用于托管 Discord Overlay 的 DirectX 11 窗口.zip

最新推荐

用于托管 Discord Overlay 的 DirectX 11 窗口.zip

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

在Flow-3D中，如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

Python实现8位等离子效果开源项目plasma.py解读

JQUERY选择器　id选择器
2)　　$('.class')　　css选择器,class类名