DOM（文档对象模型）事件允许事件驱动的编程语言在DOM树内的元素节点上注册各种事件处理程序/侦听器。
我的申请需要一些帮助，对我的英语感到抱歉。 我正在一个网站的前端工作。最终的应用程序应该可以在很多选项卡上正常工作（单个浏览器中大约有 100 个选项卡）。每个选项卡都需要
事件循环如何处理 JavaScript 中的 DOM 事件处理程序？
我对浏览器如何处理 JavaScript 事件有点困惑。 假设我有两个事件处理程序附加到按钮 A 和 B。这两个事件处理程序花费完全相同的时间来完成。 ...
同一元素上的 JavaScript DOM 事件处理程序是否按注册顺序调用相同的事件和阶段？
如果我将多个事件处理程序附加到单个 DOM 元素上的单个事件，是否保证事件处理程序按照它们添加的顺序被调用？或者我不应该依赖这种行为？
当多个事件处理程序通过 JQuery 绑定到一个元素时的优先级
当一个元素绑定多个事件处理程序时，如何确定先触发哪一个？ $(函数(){ $(".li").find('input').click(function(){alert('li>i...</desc> <question vote="63"> <p>当一个元素绑定多个事件处理程序时，如何确定先触发哪一个？</p> <pre><code><script> $(function(){ $(".li").find('input').click(function(){alert('li>input');}); $(".li").click(function(){alert('li');}); $('input').click(function(){alert('input');}); }); </script> </head> <body> <ul> <li class="li"><input type="checkbox" /><span>Hello</span></li> <li class="li"><input type="checkbox" /><span>Hello</span></li> <li class="li"><input type="checkbox" /><span>Hello</span></li> </ul> </body> </code></pre> </question> <answer tick="false" vote="81"> <p>我想指出，“先来先服务”规则并不总是正确的，它还取决于您如何注册处理程序：</p> <pre><code>Handler1 - $(document).on('click', 'a', function....) Handler2 - $('a').on('click', function....) </code></pre> <p>在上面的例子中，Handler 2 总是在 handler1 之前被调用。 </p> <p>看看这个小提琴：<a href="http://jsfiddle.net/MFec6/" rel="noreferrer">http://jsfiddle.net/MFec6/</a></p> </answer> <answer tick="true" vote="47"> <p>如果两个事件处理程序绑定到完全相同的对象，则会先到先服务。第一个附加的将首先执行。</p> <p>但是，你的例子看起来有点不同。看起来您还有一个事件绑定到 <pre><code>input</code></pre> 对象，其他事件绑定到父 <pre><code>li</code></pre> 对象。在这种情况下，事件实际发起的事件（大概是本例中的 <pre><code>input</code></pre> 元素）将首先发生，然后事件将向上冒泡到父对象，它们将稍后发生。</p> <p>如果你想停止向上冒泡到父级，你可以使用 jQuery 的 <a href="http://api.jquery.com/event.stopPropagation/" rel="noreferrer"><pre><code>event.stopPropagation()</code></pre></a> 并且事件不会到达父级并且永远不会触发他们的事件处理程序。看起来像这样：</p> <pre><code>$('input').click(function(e) { e.stopPropagation(); alert('input'); }); </code></pre> <p>根据 <pre><code>stopPropagation()</code></pre> 的 jQuery 文档，它不会停止同一对象上的其他事件处理程序，只会停止父对象上的事件处理程序，这些父对象通常会通过向上冒泡父树来获取事件。</p> <p>您可以在这里看到差异：<a href="http://jsfiddle.net/jfriend00/L33aq/" rel="noreferrer">http://jsfiddle.net/jfriend00/L33aq/</a></p> </answer> <answer tick="false" vote="4"> <p>先到先得。第一个绑定将是第一个触发的，依此类推...</p> <p>相关：<a href="https://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-t">jQuery 事件处理程序总是按照它们绑定的顺序执行 - 有什么方法可以解决这个问题吗？</a></p> </answer> </body></html>
JavaScript 事件处理程序在元素上单独触发的事件的执行顺序，其中两个元素都不是另一个的祖先
有这个JS代码： document.getElementById('e1').addEventListener('click', function(){alert('1');}, false); document.getElementById('e2').addEventListener('click', function(){alert('2');}, false);
JavaScript DOM 中事件目标的父链中事件监听器的顺序是如何确定的？
假设有一个 div 包含一个链接（a href），并且有三个事件侦听器 - 单击时 - 1）整个页面，2）div 3）标签。如果用户点击a标签，列表如何...
JavaScript DOM 事件处理程序是否按照注册顺序调用？
如果我将多个事件处理程序附加到单个 DOM 元素上的单个事件，是否可以保证事件处理程序按照添加顺序进行调用？或者我不应该依赖这种行为？
Socket.IO - 如何向房间中的每个人（包括发送者）发出事件？
在我的 Socket.Io / Node.Js / Express 应用程序中 - 在添加聊天室之前 - 我曾经为每个人（包括发送者）发出这样的事件： io.emit('聊天消息', msg); 现在我添加了房间并尝试...
为什么Javascript touchstart 和 mousedown 事件同时触发？
看看这个小提琴：演示 我已将两个事件附加到 div 元素，第一个是 mousedown，第二个是 touchstart。 从触摸设备单击元素时，同时按下鼠标...
所以我尝试创建一个视频网格，其中“占位符”图片在单击时被 DOM 中旁边的视频替换。 如果有一张图片/...
我有一个标准的 HTML 输入，我想在它失去焦点时运行 JavaScript 代码。遗憾的是我的谷歌搜索没有透露如何做到这一点。 为了说清楚，我正在寻找一种方法来做到这一点： <
有没有一种更 Angular 的方式来获取指令中给定的 elementRef 的子元素
我有一个指令负责我页面上的汉堡菜单，它看起来像这样： @指示（{ 选择器：'[sideNavToggler]' }) 导出类 SidenavtogglerDirective 实现 AfterView...
如何使用纯 Javascript 使 HTML 元素可调整大小？
我想知道如何使用纯 JavaScript，而不是 jQuery 库或任何其他库，使像 或 标签元素这样的 HTML 元素在单击时可调整大小。 我想知道如何使用纯 JavaScript，而不是 jQuery 库或任何其他库，使像 <div> 或 <p> 标签元素这样的 HTML 元素在单击时可调整大小。 我真的建议使用某种图书馆，但你要求它，你得到它： var p = document.querySelector('p'); // element to make resizable p.addEventListener('click', function init() { p.removeEventListener('click', init, false); p.className = p.className + ' resizable'; var resizer = document.createElement('div'); resizer.className = 'resizer'; p.appendChild(resizer); resizer.addEventListener('mousedown', initDrag, false); }, false); var startX, startY, startWidth, startHeight; function initDrag(e) { startX = e.clientX; startY = e.clientY; startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10); startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10); document.documentElement.addEventListener('mousemove', doDrag, false); document.documentElement.addEventListener('mouseup', stopDrag, false); } function doDrag(e) { p.style.width = (startWidth + e.clientX - startX) + 'px'; p.style.height = (startHeight + e.clientY - startY) + 'px'; } function stopDrag(e) { document.documentElement.removeEventListener('mousemove', doDrag, false); document.documentElement.removeEventListener('mouseup', stopDrag, false); } 演示 请记住，这可能无法在所有浏览器中运行（仅在 Firefox 中测试，绝对不适用于 IE <9). 纯 CSS3 解决方案怎么样？ div { resize: both; overflow: auto; } MDN 网络文档 W3Schools 示例 浏览器支持 很简单： 示例：https://jsfiddle.net/RainStudios/mw786v1w/ var element = document.getElementById('element'); //create box in bottom-left var resizer = document.createElement('div'); resizer.style.width = '10px'; resizer.style.height = '10px'; resizer.style.background = 'red'; resizer.style.position = 'absolute'; resizer.style.right = 0; resizer.style.bottom = 0; resizer.style.cursor = 'se-resize'; //Append Child to Element element.appendChild(resizer); //box function onmousemove resizer.addEventListener('mousedown', initResize, false); //Window funtion mousemove & mouseup function initResize(e) { window.addEventListener('mousemove', Resize, false); window.addEventListener('mouseup', stopResize, false); } //resize the element function Resize(e) { element.style.width = (e.clientX - element.offsetLeft) + 'px'; element.style.height = (e.clientY - element.offsetTop) + 'px'; } //on mouseup remove windows functions mousemove & mouseup function stopResize(e) { window.removeEventListener('mousemove', Resize, false); window.removeEventListener('mouseup', stopResize, false); } 查看我的跨浏览器兼容resizer。 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>resizer</title> <meta name="author" content="Andrej Hristoliubov [email protected]"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script> <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script> <style> .element { border: 1px solid #999999; border-radius: 4px; margin: 5px; padding: 5px; } </style> <script type="text/javascript"> function onresize() { var element1 = document.getElementById("element1"); var element2 = document.getElementById("element2"); var element3 = document.getElementById("element3"); var ResizerY = document.getElementById("resizerY"); ResizerY.style.top = element3.offsetTop - 15 + "px"; var topElements = document.getElementById("topElements"); topElements.style.height = ResizerY.offsetTop - 20 + "px"; var height = topElements.clientHeight - 32; if (height < 0) height = 0; height += 'px'; element1.style.height = height; element2.style.height = height; } function resizeX(x) { //consoleLog("mousemove(X = " + e.pageX + ")"); var element2 = document.getElementById("element2"); element2.style.width = element2.parentElement.clientWidth + document.getElementById('rezizeArea').offsetLeft - x + 'px'; } function resizeY(y) { //consoleLog("mousemove(Y = " + e.pageY + ")"); var element3 = document.getElementById("element3"); var height = element3.parentElement.clientHeight + document.getElementById('rezizeArea').offsetTop - y ; //consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight); if ((height + 100) > element3.parentElement.clientHeight) return;//Limit of the height of the elemtnt 3 element3.style.height = height + 'px'; onresize(); } var emailSubject = "Resizer example error"; </script> </head> <body> <div id='Message'></div> <h1>Resizer</h1> <p>Please see example of resizing of the HTML element by mouse dragging.</p> <ul> <li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li> <li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li> <li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li> </ul> <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element"> <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;"> <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;"> Element 2 <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div> <script type="text/javascript"> resizerXY("resizerXY", function (e) { resizeX(e.pageX + 10); resizeY(e.pageY + 50); }); </script> </div> <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div> <script type="text/javascript"> resizerX("resizerX", function (e) { resizeX(e.pageX + 25); }); </script> <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div> </div> <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div> <script type="text/javascript"> resizerY("resizerY", function (e) { resizeY(e.pageY + 25); }); </script> <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div> </div> <script type="text/javascript"> onresize(); </script> </body> </html> 另请参阅我的 resizer 示例 这是一个在所有侧面和角落都有调整大小助手的示例 element = document.getElementById("element") makeResizable(element,10,10) function makeResizable(element, minW = 100, minH = 100, size = 20) { const top = document.createElement('div'); top.style.width = '100%'; top.style.height = size + 'px'; top.style.backgroundColor = 'transparent'; top.style.position = 'absolute'; top.style.top = - (size/2) + 'px'; top.style.left = '0px'; top.style.cursor = 'n-resize'; top.addEventListener('mousedown',resizeYNegative()) element.appendChild(top); const bottom = document.createElement('div'); bottom.style.width = '100%'; bottom.style.height = size + 'px'; bottom.style.backgroundColor = 'transparent'; bottom.style.position = 'absolute'; bottom.style.bottom = - (size/2) + 'px'; bottom.style.left = '0px'; bottom.style.cursor = 'n-resize'; bottom.addEventListener('mousedown',resizeYPositive()) element.appendChild(bottom); const left = document.createElement('div'); left.style.width = size + 'px'; left.style.height = '100%'; left.style.backgroundColor = 'transparent'; left.style.position = 'absolute'; left.style.top = '0px'; left.style.left = - (size/2) + 'px'; left.style.cursor = 'e-resize'; left.addEventListener('mousedown',resizeXNegative()) element.appendChild(left); const right = document.createElement('div'); right.style.width = size + 'px'; right.style.height = '100%'; right.style.backgroundColor = 'transparent'; right.style.position = 'absolute'; right.style.top = '0px'; right.style.right = - (size/2) + 'px'; right.style.cursor = 'e-resize'; right.addEventListener('mousedown',resizeXPositive()) element.appendChild(right); const corner1 = document.createElement('div'); corner1.style.width = size + 'px'; corner1.style.height = size + 'px'; corner1.style.backgroundColor = 'transparent'; corner1.style.position = 'absolute'; corner1.style.top = - (size/2) + 'px'; corner1.style.left = - (size/2) + 'px'; corner1.style.cursor = 'nw-resize'; corner1.addEventListener('mousedown',resizeXNegative()) corner1.addEventListener('mousedown',resizeYNegative()) element.appendChild(corner1); const corner2 = document.createElement('div'); corner2.style.width = size + 'px'; corner2.style.height = size + 'px'; corner2.style.backgroundColor = 'transparent'; corner2.style.position = 'absolute'; corner2.style.top = - (size/2) + 'px'; corner2.style.right = - (size/2) + 'px'; corner2.style.cursor = 'ne-resize'; corner2.addEventListener('mousedown',resizeXPositive()) corner2.addEventListener('mousedown',resizeYNegative()) element.appendChild(corner2); const corner3 = document.createElement('div'); corner3.style.width = size + 'px'; corner3.style.height = size + 'px'; corner3.style.backgroundColor = 'transparent'; corner3.style.position = 'absolute'; corner3.style.bottom = - (size/2) + 'px'; corner3.style.left = - (size/2) + 'px'; corner3.style.cursor = 'sw-resize'; corner3.addEventListener('mousedown',resizeXNegative()) corner3.addEventListener('mousedown',resizeYPositive()) element.appendChild(corner3); const corner4 = document.createElement('div'); corner4.style.width = size + 'px'; corner4.style.height = size + 'px'; corner4.style.backgroundColor = 'transparent'; corner4.style.position = 'absolute'; corner4.style.bottom = - (size/2) + 'px'; corner4.style.right = - (size/2) + 'px'; corner4.style.cursor = 'se-resize'; corner4.addEventListener('mousedown',resizeXPositive()) corner4.addEventListener('mousedown',resizeYPositive()) element.appendChild(corner4); function get_int_style(key) { return parseInt(window.getComputedStyle(element).getPropertyValue(key)); } function resizeXPositive() { let offsetX function dragMouseDown(e) { if(e.button !== 0) return e = e || window.event; e.preventDefault(); const {clientX} = e; offsetX = clientX - element.offsetLeft - get_int_style('width'); document.addEventListener('mouseup', closeDragElement) document.addEventListener('mousemove', elementDrag) } function elementDrag(e) { const {clientX} = e; let x = clientX - element.offsetLeft - offsetX if(x < minW) x = minW; element.style.width = x + 'px'; } function closeDragElement() { document.removeEventListener("mouseup", closeDragElement); document.removeEventListener("mousemove", elementDrag); } return dragMouseDown } function resizeYPositive() { let offsetY function dragMouseDown(e) { if(e.button !== 0) return e = e || window.event; e.preventDefault(); const {clientY} = e; offsetY = clientY - element.offsetTop - get_int_style('height'); document.addEventListener('mouseup',closeDragElement) document.addEventListener('mousemove',elementDrag) } function elementDrag(e) { const {clientY} = e; let y = clientY - element.offsetTop - offsetY; if(y < minH) y = minH; element.style.height = y + 'px'; } function closeDragElement() { document.removeEventListener("mouseup", closeDragElement); document.removeEventListener("mousemove", elementDrag); } return dragMouseDown } function resizeXNegative() { let offsetX let startX let startW let maxX function dragMouseDown(e) { if(e.button !== 0) return e = e || window.event; e.preventDefault(); const {clientX} = e; startX = get_int_style('left') startW = get_int_style('width') offsetX = clientX - startX; maxX = startX + startW - minW document.addEventListener('mouseup',closeDragElement) document.addEventListener('mousemove',elementDrag) } function elementDrag(e) { const {clientX} = e; let x = clientX - offsetX let w = startW + startX - x if(w < minW) w = minW; if(x > maxX) x = maxX; element.style.left = x + 'px'; element.style.width = w + 'px'; } function closeDragElement() { document.removeEventListener("mouseup", closeDragElement); document.removeEventListener("mousemove", elementDrag); } return dragMouseDown } function resizeYNegative() { let offsetY let startY let startH let maxY function dragMouseDown(e) { if(e.button !== 0) return e = e || window.event; e.preventDefault(); const {clientY} = e; startY = get_int_style('top') startH = get_int_style('height') offsetY = clientY - startY; maxY = startY + startH - minH document.addEventListener('mouseup',closeDragElement,false) document.addEventListener('mousemove',elementDrag,false) } function elementDrag(e) { const {clientY} = e; let y = clientY - offsetY let h = startH + startY - y if(h < minH) h = minH; if(y > maxY) y = maxY; element.style.top = y + 'px'; element.style.height = h + 'px'; } function closeDragElement() { document.removeEventListener("mouseup", closeDragElement); document.removeEventListener("mousemove", elementDrag); } return dragMouseDown } } #element { position: absolute; background-color: #f1f1f1; border: 1px solid #d3d3d3; left: 40px; top: 40px; width: 100px; height: 100px; border-radius: 5px; } <div id="element"></div> 仅使用 vanilla js 中的 mousemove 事件 步骤 将 mousemove 添加到您的目标 监听目标move事件 获取指针位置，调整目标大小 代码 const div = document.querySelector(`div.before`); const box = document.querySelector(`div.container`); box.addEventListener(`mousemove`, (e) => { const { offsetX, offsetY, } = e; div.style.width = offsetX + `px`; }); 现场演示 https://codepen.io/xgqfrms/full/wvMQqZL 参考 https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event https://medium.com/the-z/making-a-ressized-div-in-js-is-not-easy-as-you-think-bda19a1bc53d 我刚刚创建了一个 CodePen，它展示了如何使用 ES6 轻松完成此操作。 http://codepen.io/travist/pen/GWRBQV 基本上，这是执行此操作的类。 let getPropertyValue = function(style, prop) { let value = style.getPropertyValue(prop); value = value ? value.replace(/[^0-9.]/g, '') : '0'; return parseFloat(value); } let getElementRect = function(element) { let style = window.getComputedStyle(element, null); return { x: getPropertyValue(style, 'left'), y: getPropertyValue(style, 'top'), width: getPropertyValue(style, 'width'), height: getPropertyValue(style, 'height') } } class Resizer { constructor(wrapper, element, options) { this.wrapper = wrapper; this.element = element; this.options = options; this.offsetX = 0; this.offsetY = 0; this.handle = document.createElement('div'); this.handle.setAttribute('class', 'drag-resize-handlers'); this.handle.setAttribute('data-direction', 'br'); this.wrapper.appendChild(this.handle); this.wrapper.style.top = this.element.style.top; this.wrapper.style.left = this.element.style.left; this.wrapper.style.width = this.element.style.width; this.wrapper.style.height = this.element.style.height; this.element.style.position = 'relative'; this.element.style.top = 0; this.element.style.left = 0; this.onResize = this.resizeHandler.bind(this); this.onStop = this.stopResize.bind(this); this.handle.addEventListener('mousedown', this.initResize.bind(this)); } initResize(event) { this.stopResize(event, true); this.handle.addEventListener('mousemove', this.onResize); this.handle.addEventListener('mouseup', this.onStop); } resizeHandler(event) { this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft); this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop); let wrapperRect = getElementRect(this.wrapper); let elementRect = getElementRect(this.element); this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px'; this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px'; this.element.style.width = (elementRect.width + this.offsetX) + 'px'; this.element.style.height = (elementRect.height + this.offsetY) + 'px'; } stopResize(event, nocb) { this.handle.removeEventListener('mousemove', this.onResize); this.handle.removeEventListener('mouseup', this.onStop); } } class Dragger { constructor(wrapper, element, options) { this.wrapper = wrapper; this.options = options; this.element = element; this.element.draggable = true; this.element.setAttribute('draggable', true); this.element.addEventListener('dragstart', this.dragStart.bind(this)); } dragStart(event) { let wrapperRect = getElementRect(this.wrapper); var x = wrapperRect.x - parseFloat(event.clientX); var y = wrapperRect.y - parseFloat(event.clientY); event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y); } dragStop(event, prevX, prevY) { var posX = parseFloat(event.clientX) + prevX; var posY = parseFloat(event.clientY) + prevY; this.wrapper.style.left = posX + 'px'; this.wrapper.style.top = posY + 'px'; } } class DragResize { constructor(element, options) { options = options || {}; this.wrapper = document.createElement('div'); this.wrapper.setAttribute('class', 'tooltip drag-resize'); if (element.parentNode) { element.parentNode.insertBefore(this.wrapper, element); } this.wrapper.appendChild(element); element.resizer = new Resizer(this.wrapper, element, options); element.dragger = new Dragger(this.wrapper, element, options); } } document.body.addEventListener('dragover', function (event) { event.preventDefault(); return false; }); document.body.addEventListener('drop', function (event) { event.preventDefault(); var dropData = event.dataTransfer.getData("text/plain").split(','); var element = document.getElementById(dropData[0]); element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2])); return false; }); 我创建了一个函数，它接收 html 元素的 id 并在其右侧添加边框 该功能是通用的，只接收一个 id，因此您可以按原样复制它并且它会起作用 var myoffset; function resizeE(elem){ var borderDiv = document.createElement("div"); borderDiv.className = "border"; borderDiv.addEventListener("mousedown",myresize = function myrsize(e) { myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width"))); window.addEventListener("mouseup",mouseUp); document.addEventListener("mousemove",mouseMove = function mousMove(e) { document.getElementById(elem).style.width = `${e.clientX - myoffset - document.getElementById(elem).offsetLeft}px`; }); }); document.getElementById(elem).appendChild(borderDiv); } function mouseUp() { document.removeEventListener("mousemove", mouseMove); window.removeEventListener("mouseup",mouseUp); } function load() { resizeE("resizeableDiv"); resizeE("anotherresizeableDiv"); resizeE("anotherresizeableDiv1"); } .border { position: absolute; cursor: e-resize; width: 9px; right: -5px; top: 0; height: 100%; } #resizeableDiv { width: 30vw; height: 30vh; background-color: #84f4c6; position: relative; } #anotherresizeableDiv { width: 30vw; height: 30vh; background-color: #9394f4; position: relative; } #anotherresizeableDiv1 { width: 30vw; height: 30vh; background-color: #43f4f4; position: relative; } #anotherresizeableDiv1 .border{ background-color: black; } #anotherresizeableDiv .border{ width: 30px; right: -200px; background-color: green; } <body onload="load()"> <div id="resizeableDiv">change my size with the east border</div> <div id="anotherresizeableDiv1">with visible border</div> </body> <div id="anotherresizeableDiv">with editted outside border</div> </body> resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted 这里有非常好的示例可以开始尝试，但所有这些示例都是基于添加一些额外或外部元素（例如“div”）作为参考元素来拖动它，并计算原始元素的新尺寸或位置。 这是一个不使用任何额外元素的示例。我们可以添加边框、填充或边距，而不影响其操作。 在此示例中，我们没有添加颜色，也没有添加对边框或右下角的任何视觉参考作为可以放大或缩小尺寸的线索，但在可调整大小的元素周围使用光标，线索就会出现！ let resizerForCenter = new Resizer('center') resizerForCenter.initResizer() 通过 CodeSandbox 查看实际效果： 在此示例中，我们使用 ES6 和一个导出名为 Resizer 的类的模块。 一个例子胜过千言万语： 或者使用代码片段： const html = document.querySelector('html') class Resizer { constructor(elemId) { this._elem = document.getElementById(elemId) /** * Stored binded context handlers for method passed to eventListeners! * * See: https://stackoverflow.com/questions/9720927/removing-event-listeners-as-class-prototype-functions */ this._checkBorderHandler = this._checkBorder.bind(this) this._doResizeHandler = this._doResize.bind(this) this._initResizerHandler = this.initResizer.bind(this) this._onResizeHandler = this._onResize.bind(this) } initResizer() { this.stopResizer() this._beginResizer() } _beginResizer() { this._elem.addEventListener('mousemove', this._checkBorderHandler, false) } stopResizer() { html.style.cursor = 'default' this._elem.style.cursor = 'default' window.removeEventListener('mousemove', this._doResizeHandler, false) window.removeEventListener('mouseup', this._initResizerHandler, false) this._elem.removeEventListener('mousedown', this._onResizeHandler, false) this._elem.removeEventListener('mousemove', this._checkBorderHandler, false) } _doResize(e) { let elem = this._elem let boxSizing = getComputedStyle(elem).boxSizing let borderRight = 0 let borderLeft = 0 let borderTop = 0 let borderBottom = 0 let paddingRight = 0 let paddingLeft = 0 let paddingTop = 0 let paddingBottom = 0 switch (boxSizing) { case 'content-box': paddingRight = parseInt(getComputedStyle(elem).paddingRight) paddingLeft = parseInt(getComputedStyle(elem).paddingLeft) paddingTop = parseInt(getComputedStyle(elem).paddingTop) paddingBottom = parseInt(getComputedStyle(elem).paddingBottom) break case 'border-box': borderRight = parseInt(getComputedStyle(elem).borderRight) borderLeft = parseInt(getComputedStyle(elem).borderLeft) borderTop = parseInt(getComputedStyle(elem).borderTop) borderBottom = parseInt(getComputedStyle(elem).borderBottom) break default: break } let horizontalAdjustment = (paddingRight + paddingLeft) - (borderRight + borderLeft) let verticalAdjustment = (paddingTop + paddingBottom) - (borderTop + borderBottom) let newWidth = elem.clientWidth + e.movementX - horizontalAdjustment + 'px' let newHeight = elem.clientHeight + e.movementY - verticalAdjustment + 'px' let cursorType = getComputedStyle(elem).cursor switch (cursorType) { case 'all-scroll': elem.style.width = newWidth elem.style.height = newHeight break case 'col-resize': elem.style.width = newWidth break case 'row-resize': elem.style.height = newHeight break default: break } } _onResize(e) { // On resizing state! let elem = e.target let newCursorType = undefined let cursorType = getComputedStyle(elem).cursor switch (cursorType) { case 'nwse-resize': newCursorType = 'all-scroll' break case 'ew-resize': newCursorType = 'col-resize' break case 'ns-resize': newCursorType = 'row-resize' break default: break } html.style.cursor = newCursorType // Avoid cursor's flickering elem.style.cursor = newCursorType // Remove what is not necessary, and could have side effects! elem.removeEventListener('mousemove', this._checkBorderHandler, false); // Events on resizing state /** * We do not apply the mousemove event on the elem to resize it, but to the window to prevent the mousemove from slippe out of the elem to resize. This work bc we calculate things based on the mouse position */ window.addEventListener('mousemove', this._doResizeHandler, false); window.addEventListener('mouseup', this._initResizerHandler, false); } _checkBorder(e) { const elem = e.target const borderSensitivity = 5 const coor = getCoordenatesCursor(e) const onRightBorder = ((coor.x + borderSensitivity) > elem.scrollWidth) const onBottomBorder = ((coor.y + borderSensitivity) > elem.scrollHeight) const onBottomRightCorner = (onRightBorder && onBottomBorder) if (onBottomRightCorner) { elem.style.cursor = 'nwse-resize' } else if (onRightBorder) { elem.style.cursor = 'ew-resize' } else if (onBottomBorder) { elem.style.cursor = 'ns-resize' } else { elem.style.cursor = 'auto' } if (onRightBorder || onBottomBorder) { elem.addEventListener('mousedown', this._onResizeHandler, false) } else { elem.removeEventListener('mousedown', this._onResizeHandler, false) } } } function getCoordenatesCursor(e) { let elem = e.target; // Get the Viewport-relative coordinates of cursor. let viewportX = e.clientX let viewportY = e.clientY // Viewport-relative position of the target element. let elemRectangle = elem.getBoundingClientRect() // The function returns the largest integer less than or equal to a given number. let x = Math.floor(viewportX - elemRectangle.left) // - elem.scrollWidth let y = Math.floor(viewportY - elemRectangle.top) // - elem.scrollHeight return {x, y} } let resizerForCenter = new Resizer('center') resizerForCenter.initResizer() let resizerForLeft = new Resizer('left') resizerForLeft.initResizer() setTimeout(handler, 10000, true); // 10s function handler() { resizerForCenter.stopResizer() } body { background-color: white; } #wrapper div { /* box-sizing: border-box; */ position: relative; float:left; overflow: hidden; height: 50px; width: 50px; padding: 3px; } #left { background-color: blueviolet; } #center { background-color:lawngreen ; } #right { background: blueviolet; } #wrapper { border: 5px solid hotpink; display: inline-block; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Resizer v0.0.1</title> </head> <body> <div id="wrapper"> <div id="left">Left</div> <div id="center">Center</div> <div id="right">Right</div> </div> </body> </html> // import function get_difference(pre, mou) { return { x: mou.x - pre.x, y: mou.y - pre.y }; } /* if your panel is in a nested environment, which the parent container's width and height does not equa to document width and height, for example, in an element `canvas`, then edit it to function oMousePos(e) { var rc = canvas.getBoundingClientRect(); return { x: e.clientX - rc.left, y: e.clientY - rc.top, }; } */ function oMousePos(e) { return { x: e.clientX, y: e.clientY, }; } function render_element(styles, el) { for (const [kk, vv] of Object.entries(styles)) { el.style[kk] = vv; } } class MoveablePanel { /* prevent an element from moving out of window */ constructor(container, draggable, left, top) { this.container = container; this.draggable = draggable; this.left = left; this.top = top; let rect = container.getBoundingClientRect(); this.width = rect.width; this.height = rect.height; this.status = false; // initial position of the panel, should not be changed this.original = { left: left, top: top }; // current left and top postion // {this.left, this.top} // assign the panel to initial position // initalize in registration this.default(); if (!MoveablePanel._instance) { MoveablePanel._instance = []; } MoveablePanel._instance.push(this); } mousedown(e) { this.status = true; this.previous = oMousePos(e) } mousemove(e) { if (!this.status) { return; } let pos = oMousePos(e); let vleft = this.left + pos.x - this.previous.x; let vtop = this.top + pos.y - this.previous.y; let kleft, ktop; if (vleft < 0) { kleft = 0; } else if (vleft > window.innerWidth - this.width) { kleft = window.innerWidth - this.width; } else { kleft = vleft; } if (vtop < 0) { ktop = 0; } else if (vtop > window.innerHeight - this.height) { ktop = window.innerHeight - this.height; } else { ktop = vtop; } this.container.style.left = `${kleft}px`; this.container.style.top = `${ktop}px`; } /* sometimes user move the cursor too fast which mouseleave is previous than mouseup to prevent moving too fast and break the control, mouseleave is handled the same as mouseup */ mouseupleave(e) { if (!this.status) { return null; } this.status = false; let pos = oMousePos(e); let vleft = this.left + pos.x - this.previous.x; let vtop = this.top + pos.y - this.previous.y; if (vleft < 0) { this.left = 0; } else if (vleft > window.innerWidth - this.width) { this.left = window.innerWidth - this.width; } else { this.left = vleft; } if (vtop < 0) { this.top = 0; } else if (vtop > window.innerHeight - this.height) { this.top = window.innerHeight - this.height; } else { this.top = vtop; } this.show(); return true; } default () { this.container.style.left = `${this.original.left}px`; this.container.style.top = `${this.original.top}px`; } /* panel with a higher z index will interupt drawing therefore if panel is not displaying, set it with a lower z index that canvas change index doesn't work, if panel is hiding, then we move it out hide: record current position, move panel out show: assign to recorded position notice this position has nothing to do panel drag movement they cannot share the same variable */ hide() { // move to the right bottom conner this.container.style.left = `${window.screen.width}px`; this.container.style.top = `${window.screen.height}px`; } show() { this.container.style.left = `${this.left}px`; this.container.style.top = `${this.top}px`; } } // end of import class DotButton{ constructor( width_px, styles, // mainly pos, padding and margin, e.g. {top: 0, left: 0, margin: 0}, color, color_hover, border, // boolean border_dismiss, // boolean: dismiss border when hover ){ this.width = width_px; this.styles = styles; this.color = color; this.color_hover = color_hover; this.border = border; this.border_dismiss = border_dismiss; } create(_styles=null){ var el = document.createElement('div'); Object.keys(this.styles).forEach(kk=>{ el.style[kk] = `${this.styles[kk]}px`; }); if(_styles){ Object.keys(_styles).forEach(kk=>{ el.style[kk] = `${this.styles[kk]}px`; }); } el.style.width = `${this.width}px` el.style.height = `${this.width}px` el.style.position = 'absolute'; el.style.left = `${this.left_px}px`; el.style.top = `${this.top_px}px`; el.style.background = this.color; if(this.border){ el.style.border = '1px solid'; } el.style.borderRadius = `${this.width}px`; el.addEventListener('mouseenter', ()=>{ el.style.background = this.color_hover; if(this.border_dismiss){ el.style.border = `1px solid ${this.color_hover}`; } }); el.addEventListener('mouseleave', ()=>{ el.style.background = this.color; if(this.border_dismiss){ el.style.border = '1px solid'; } }); return el; } } function cursor_hover(el, default_cursor, to_cursor){ el.addEventListener('mouseenter', function(){ this.style.cursor = to_cursor; }.bind(el)); el.addEventListener('mouseleave', function(){ this.style.cursor = default_cursor; }.bind(el)); } class FlexPanel extends MoveablePanel{ constructor( parent_el, top_px, left_px, width_px, height_px, background, handle_width_px, coner_vmin_ratio, button_width_px, button_margin_px, ){ super( (()=>{ var el = document.createElement('div'); render_element( { position: 'fixed', top: `${top_px}px`, left: `${left_px}px`, width: `${width_px}px`, height: `${height_px}px`, background: background, }, el, ); return el; })(), // iife returns a container (panel el) new DotButton(button_width_px, {top: 0, right: 0, margin: button_margin_px}, 'green', 'lightgreen', false, false).create(), // draggable left_px, // left top_px, // top ); this.draggable.addEventListener('mousedown', e => { e.preventDefault(); this.mousedown(e); }); this.draggable.addEventListener('mousemove', e => { e.preventDefault(); this.mousemove(e); }); this.draggable.addEventListener('mouseup', e => { e.preventDefault(); this.mouseupleave(e); }); this.draggable.addEventListener('mouseleave', e => { e.preventDefault(); this.mouseupleave(e); }); this.parent_el = parent_el; this.background = background; // parent this.width = width_px; this.height = height_px; this.handle_width_px = handle_width_px; this.coner_vmin_ratio = coner_vmin_ratio; this.panel_el = document.createElement('div'); // styles that won't change this.panel_el.style.position = 'absolute'; this.panel_el.style.top = `${this.handle_width_px}px`; this.panel_el.style.left = `${this.handle_width_px}px`; this.panel_el.style.background = this.background; this.handles = [ this.handle_top, this.handle_left, this.handle_bottom, this.handle_right, this.handle_lefttop, this.handle_topleft, this.handle_topright, this.handle_righttop, this.handle_rightbottom, this.handle_bottomright, this.handle_bottomleft, this.handle_leftbottom, ] = Array.from({length: 12}, i => document.createElement('div')); this.handles.forEach(el=>{ el.style.position = 'absolute'; }); this.handle_topleft.style.top = '0'; this.handle_topleft.style.left = `${this.handle_width_px}px`; this.handle_righttop.style.right = '0'; this.handle_righttop.style.top = `${this.handle_width_px}px`; this.handle_bottomright.style.bottom = '0'; this.handle_bottomright.style.right = `${this.handle_width_px}px`; this.handle_leftbottom.style.left = '0'; this.handle_leftbottom.style.bottom = `${this.handle_width_px}px`; this.handle_lefttop.style.left = '0'; this.handle_lefttop.style.top = '0'; this.handle_topright.style.top = '0'; this.handle_topright.style.right = '0'; this.handle_rightbottom.style.right = '0'; this.handle_rightbottom.style.bottom = '0'; this.handle_bottomleft.style.bottom = '0'; this.handle_bottomleft.style.left = '0'; this.update_ratio(); [ 'ns-resize', // | 'ew-resize', // - 'ns-resize', // | 'ew-resize', // - 'nwse-resize', // \ 'nwse-resize', // \ 'nesw-resize', // / 'nesw-resize', // / 'nwse-resize', // \ 'nwse-resize', // \ 'nesw-resize', // / 'nesw-resize', // / ].map((dd, ii)=>{ cursor_hover(this.handles[ii], 'default', dd); }); this.vtop = this.top; this.vleft = this.left; this.vwidth = this.width; this.vheight = this.height; this.update_ratio(); this.handles.forEach(el=>{ this.container.appendChild(el); }); cursor_hover(this.draggable, 'default', 'move'); this.panel_el.appendChild(this.draggable); this.container.appendChild(this.panel_el); this.parent_el.appendChild(this.container); [ this.edgemousedown, this.verticalmousemove, this.horizontalmousemove, this.nwsemousemove, this.neswmousemove, this.edgemouseupleave, ] = [ this.edgemousedown.bind(this), this.verticalmousemove.bind(this), this.horizontalmousemove.bind(this), this.nwsemousemove.bind(this), this.neswmousemove.bind(this), this.edgemouseupleave.bind(this), ]; this.handle_top.addEventListener('mousedown', e=>{this.edgemousedown(e, 'top')}); this.handle_left.addEventListener('mousedown', e=>{this.edgemousedown(e, 'left')}); this.handle_bottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottom')}); this.handle_right.addEventListener('mousedown', e=>{this.edgemousedown(e, 'right')}); this.handle_lefttop.addEventListener('mousedown', e=>{this.edgemousedown(e, 'lefttop')}); this.handle_topleft.addEventListener('mousedown', e=>{this.edgemousedown(e, 'topleft')}); this.handle_topright.addEventListener('mousedown', e=>{this.edgemousedown(e, 'topright')}); this.handle_righttop.addEventListener('mousedown', e=>{this.edgemousedown(e, 'righttop')}); this.handle_rightbottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'rightbottom')}); this.handle_bottomright.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottomright')}); this.handle_bottomleft.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottomleft')}); this.handle_leftbottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'leftbottom')}); this.handle_top.addEventListener('mousemove', this.verticalmousemove); this.handle_left.addEventListener('mousemove', this.horizontalmousemove); this.handle_bottom.addEventListener('mousemove', this.verticalmousemove); this.handle_right.addEventListener('mousemove', this.horizontalmousemove); this.handle_lefttop.addEventListener('mousemove', this.nwsemousemove); this.handle_topleft.addEventListener('mousemove', this.nwsemousemove); this.handle_topright.addEventListener('mousemove', this.neswmousemove); this.handle_righttop.addEventListener('mousemove', this.neswmousemove); this.handle_rightbottom.addEventListener('mousemove', this.nwsemousemove); this.handle_bottomright.addEventListener('mousemove', this.nwsemousemove); this.handle_bottomleft.addEventListener('mousemove', this.neswmousemove); this.handle_leftbottom.addEventListener('mousemove', this.neswmousemove); this.handle_top.addEventListener('mouseup', e=>{this.verticalmousemove(e); this.edgemouseupleave()}); this.handle_left.addEventListener('mouseup', e=>{this.horizontalmousemove(e); this.edgemouseupleave()}); this.handle_bottom.addEventListener('mouseup', e=>{this.verticalmousemove(e); this.edgemouseupleave()}); this.handle_right.addEventListener('mouseup', e=>{this.horizontalmousemove(e); this.edgemouseupleave()}); this.handle_lefttop.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()}); this.handle_topleft.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()}); this.handle_topright.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()}); this.handle_righttop.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()}); this.handle_rightbottom.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()}); this.handle_bottomright.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()}); this.handle_bottomleft.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()}); this.handle_leftbottom.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()}); this.handle_top.addEventListener('mouseleave', this.edgemouseupleave); this.handle_left.addEventListener('mouseleave', this.edgemouseupleave); this.handle_bottom.addEventListener('mouseleave', this.edgemouseupleave); this.handle_right.addEventListener('mouseleave', this.edgemouseupleave); this.handle_lefttop.addEventListener('mouseleave', this.edgemouseupleave); this.handle_topleft.addEventListener('mouseleave', this.edgemouseupleave); this.handle_topright.addEventListener('mouseleave', this.edgemouseupleave); this.handle_righttop.addEventListener('mouseleave', this.edgemouseupleave); this.handle_rightbottom.addEventListener('mouseleave', this.edgemouseupleave); this.handle_bottomright.addEventListener('mouseleave', this.edgemouseupleave); this.handle_bottomleft.addEventListener('mouseleave', this.edgemouseupleave); this.handle_leftbottom.addEventListener('mouseleave', this.edgemouseupleave); } // box size change triggers corner handler size change update_ratio(){ this.container.style.top = `${this.vtop}px`; this.container.style.left = `${this.vleft}px`; this.container.style.width = `${this.vwidth}px`; this.container.style.height = `${this.vheight}px`; this.panel_el.style.width = `${this.vwidth - 2 * this.handle_width_px}px`; this.panel_el.style.height = `${this.vheight - 2 * this.handle_width_px}px`; this.ratio = this.vwidth < this.vheight ? this.coner_vmin_ratio * this.vwidth : this.coner_vmin_ratio * this.vheight; [ this.handle_top, this.handle_bottom, ].forEach(el=>{ el.style.width = `${this.vwidth - 2 * this.ratio}px`; el.style.height = `${this.handle_width_px}px`; }); [ this.handle_left, this.handle_right, ].forEach(el=>{ el.style.height = `${this.vheight - 2 * this.ratio}px`; el.style.width = `${this.handle_width_px}px`; }); this.handle_top.style.top = `0`; this.handle_top.style.left = `${this.ratio}px`; this.handle_left.style.top = `${this.ratio}px`; this.handle_left.style.left = `0`; this.handle_bottom.style.bottom = `0`; this.handle_bottom.style.right = `${this.ratio}px`; this.handle_right.style.bottom = `${this.ratio}px`; this.handle_right.style.right = `0`; [ this.handle_topright, this.handle_bottomleft, ].forEach(el=>{ el.style.width = `${this.ratio}px`; el.style.height = `${this.handle_width_px}px`; }); [ this.handle_lefttop, this.handle_rightbottom, ].forEach(el=>{ el.style.width = `${this.handle_width_px}px`; el.style.height = `${this.ratio}px`; }); [ this.handle_topleft, this.handle_bottomright, ].forEach(el=>{ el.style.width = `${this.ratio - this.handle_width_px}px`; el.style.height = `${this.handle_width_px}px`; }); [ this.handle_righttop, this.handle_leftbottom, ].forEach(el=>{ el.style.height = `${this.handle_width_px}px`; el.style.width = `${this.ratio - this.handle_width_px}px`; }); } edgemousedown(e, flag){ this.previous = oMousePos(e); this.flag = flag; this.drag = true; } verticalmousemove(e){ if(this.drag){ // - this.mouse = oMousePos(e); var ydif = this.mouse.y - this.previous.y; switch(this.flag){ case 'top': this.vtop = this.top + ydif; this.vheight = this.height - ydif; this.vleft = this.left; this.vwidth = this.width; break; case 'bottom': this.vheight = this.height + ydif; this.vtop = this.top; this.vleft = this.left; this.vwidth = this.width; break; } this.update_ratio(); } } horizontalmousemove(e){ if(this.drag){ // | this.mouse = oMousePos(e); var xdif = this.mouse.x - this.previous.x; switch(this.flag){ case 'left': this.vleft = this.left + xdif; this.vwidth = this.width - xdif; this.vtop = this.top; this.vheight = this.height; break; case 'right': this.vwidth = this.width + xdif; this.vtop = this.top; this.vleft = this.left; this.vheight = this.height; break; } this.update_ratio(); } } nwsemousemove(e){ if(this.drag){ // \ this.mouse = oMousePos(e); var ydif = this.mouse.y - this.previous.y; var xdif = this.mouse.x - this.previous.x; switch(this.flag){ case 'topleft': this.vleft = this.left + xdif; this.vtop = this.top + ydif; this.vwidth = this.width - xdif; this.vheight = this.height - ydif; break; case 'lefttop': this.vleft = this.left + xdif; this.vtop = this.top + ydif; this.vwidth = this.width - xdif; this.vheight = this.height - ydif; break; case 'bottomright': this.vwidth = this.width + xdif; this.vheight = this.height + ydif; this.vtop = this.top; this.vleft = this.left; break; case 'rightbottom': this.vwidth = this.width + xdif; this.vheight = this.height + ydif; this.vtop = this.top; this.vleft = this.left; break; } this.update_ratio(); } } neswmousemove(e){ if(this.drag){ // / this.mouse = oMousePos(e); var ydif = this.mouse.y - this.previous.y; var xdif = this.mouse.x - this.previous.x; switch(this.flag){ case 'topright': this.vtop = this.top + ydif; this.vwidth = this.width + xdif; this.vheight = this.height - ydif; this.vleft = this.left; break; case 'righttop': this.vtop = this.top + ydif; this.vwidth = this.width + xdif; this.vheight = this.height - ydif; this.vleft = this.left; break; case 'bottomleft': this.vleft = this.left + xdif; this.vwidth = this.width - xdif; this.vheight = this.height + ydif; this.vtop = this.top; break; case 'leftbottom': this.vleft = this.left + xdif; this.vwidth = this.width - xdif; this.vheight = this.height + ydif; this.vtop = this.top; break; } this.update_ratio(); } } edgemouseupleave(){ this.drag = false; this.top = this.vtop; this.left = this.vleft; this.width = this.vwidth; this.height = this.vheight; } mouseupleave(e){ if(super.mouseupleave(e)){ this.vtop = this.top; this.vleft = this.left; } } } var fp = new FlexPanel( document.body, // parent div container 20, // top margin 20, // left margin 200, // width 150, // height 'lightgrey', // background 20, // handle height when horizontal; handle width when vertical 0.2, // edge up and left resize bar width : top resize bar width = 1 : 5 35, // green move button width and height 2, // button margin ); /* this method creates an element for you which you don't need to pass in a selected element to manipuate dom element fp.container -> entire panel fp.panel_el -> inside panel */ 完全实现功能需要大量的硬编码。请参阅文档，它将向您展示如何使用每个类作为元素。 const onMouseDownEvent=(ev: React.DragEvent)=>{ let imgElem = (ev.target as HTMLImageElement); let childElem = (ev.currentTarget && ev.currentTarget.childNodes && ev.currentTarget.childNodes[0]); let original_height = parseFloat(getComputedStyle(imgElem, null).getPropertyValue('height').replace('px', '')); let original_width = parseFloat(getComputedStyle(imgElem, null).getPropertyValue('width').replace('px', '')); let original_Y = imgElem.getBoundingClientRect().top; let original_X = imgElem.getBoundingClientRect().right; ev.preventDefault(); var original_mouse_y = ev.pageY; var original_mouse_x = ev.pageX; document.addEventListener('mousemove', resize); document.addEventListener('mouseup', stopResize); function resize(mouseMoveEvent) { const height = original_height + (mouseMoveEvent.pageY - original_mouse_y); const width = original_width + (mouseMoveEvent.pageX - original_mouse_x); imgElem.style.height = height + 'px'; mouseMoveEvent.target.childNodes[0].innerHTML = imgElem.style.height; imgElem.style.width = width + 'px'; mouseMoveEvent.target.childNodes[0].innerHTML = imgElem.style.width; } function stopResize() { document.removeEventListener('mousemove', resize) } } <div onMouseDown={onMouseDownEvent} id="imgInCanvas" onDragStart={ onDragStartFromContainer } draggable="true"/> 我不确定这是否是您正在寻找的，但您始终可以使用 CSS resize 属性并使用 javascript 将其添加到元素中；例如，假设您有一个 id 为 div 的 myDiv 元素，并且您希望使其可调整大小： document.getElementById("myDiv").style.resize = "both"; 相关链接如下： 样式调整大小属性 CSS 调整大小属性 var resizeHandle = document.getElementById('resizable'); var box = document.getElementById('resize'); resizeHandle.addEventListener('mousedown', initialiseResize, false); function initialiseResize(e) { window.addEventListener('mousemove', startResizing, false); window.addEventListener('mouseup', stopResizing, false); } function stopResizing(e) { window.removeEventListener('mousemove', startResizing, false); window.removeEventListener('mouseup', stopResizing, false); } function startResizing(e) { box.style.width = (e.clientX) + 'px'; box.style.height = (e.clientY) + 'px'; } function startResizing(e) { box.style.width = (e.clientX - box.offsetLeft) + 'px'; box.style.height = (e.clientY - box.offsetTop) + 'px'; } #resize { position: relative; width: 130px; height: 130px; border: 2px solid blue; color: white; } #resizable { background-color: white; width: 10px; height: 10px; cursor: se-resize; position: absolute; right: 0; bottom: 0; } <div id="resize"> <div id="resizable"> </div>
JavaScript 和 jQuery 中“mousedown”事件的用法
jQuery mousedown 方法有什么区别： $(文档).mousedown(回调); 以及 mousedown 事件的用法： document.addEventListener('mousedown', 回调, false);
我制作了这个简单的计数器应用程序，html和js代码如下。减少按钮工作正常，每次单击都会将 h1 文本减少 1。重置按钮返回到 0。但是当我单击 inc...
如何使用JavaScript来阻止子元素的点击事件并禁止改变鼠标光标样式
我希望只阻止.box1和.box2区域内的点击事件，并且鼠标光标样式不会改变。我当前的代码如下，我在其中检查 e.targ 的值...
如果愿意的话，似乎可以做很多奇怪的事情来连接页面加载类型事件。以下是一些具体问题： 我知道自动连接的 pageLoad 函数。是...
我想使用 JavaScript（或 PHP，如果可能）通过页面模板中的超链接触发浏览器的后退功能。有谁知道如何实现这个？
我正在做 odin 项目的 Etch-a-sketch 项目，到目前为止我已经能够制作网格并应用悬停效果。 我一直在尝试让子 div 适合父 div 属性...
所以我尝试创建一个函数，根据每行的第一个单元格（不包括第一行）对表格进行排序 元素的文本值是表单输入的值，它必须是 (A...