blocks|key|1377257|text|尝试阻止mousedown事件的默认值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377258|<div+onmousedown="event.preventDefault+?+event.preventDefault()+:+event.returnValue+=+false">asd</div>|code-block|syntax|javascript|1377259|或|1377260|<div+onmousedown="return+false">asd</div>|1377261|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try preventing default on mousedown event:

<pre><code>&lt;div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"&gt;asd&lt;/div&gt;
</code></pre>

or

<pre><code>&lt;div onmousedown="return false"&gt;asd&lt;/div&gt;
</code></pre>

blocks|key|1592489|text|这可能行得通:你可以禁用css3对文本、图像和基本上所有内容的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592490|.unselectable+{
+++-moz-user-select:+-moz-none;
+++-khtml-user-select:+none;
+++-webkit-user-select:+none;

+++/*
+++++Introduced+in+IE+10.
+++++See+http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
+++*/
+++-ms-user-select:+none;
+++user-select:+none;
}|code-block|syntax|javascript|1592491|当然，这只适用于较新的浏览器。有关更多详细信息，请查看：|1592492|How+to+disable+text+selection+highlighting+using+CSS?|offset|length|1592493|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting^0|0|0|0|0|1H|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

This might work: You can disable selecting with css3 for text, image and basically everything.

<pre><code>.unselectable {
 -moz-user-select: -moz-none;
 -khtml-user-select: none;
 -webkit-user-select: none;

 /*
 Introduced in IE 10.
 See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
 */
 -ms-user-select: none;
 user-select: none;
}
</code></pre>

Of course only for the newer browsers. For more details check:

<a href="https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting">How to disable text selection highlighting using CSS?</a>

blocks|key|1377328|text|这是可行的。试试看。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377329|<BODY+ondragstart="return+false;"+ondrop="return+false;">|code-block|syntax|javascript|1377330|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works. Try it.
<pre><code>&lt;BODY ondragstart=&quot;return false;&quot; ondrop=&quot;return false;&quot;&gt;
</code></pre>

blocks|key|1592591|text|对于jQuery，它将是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592592|$(document).ready(function()+{
++$('#yourDiv').on('mousedown',+function(e)+{
++++++e.preventDefault();
++});
});|code-block|syntax|javascript|1592593|在我的例子中，我想禁止用户在输入中拖放文本，所以我使用"+drop“而不是"mousedown”。|1592594|$(document).ready(function()+{
++$('input').on('drop',+function(event)+{
++++event.preventDefault();
++});
});|1592595|取而代之的是event.preventDefault()，您可以返回false。Here's+the+difference.|offset|length|1592596|和代码：|1592597|$(document).ready(function()+{
++$('input').on('drop',+function()+{
++++return+false;
++});
});|1592598|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false^0|0|0|0|0|14|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

With jQuery it will be something like that:

<pre><code>$(document).ready(function() {
 $('#yourDiv').on('mousedown', function(e) {
 e.preventDefault();
 });
});
</code></pre>

In my case I wanted to disable the user from drop text in the inputs so I used "drop" instead "mousedown".

<pre><code>$(document).ready(function() {
 $('input').on('drop', function(event) {
 event.preventDefault();
 });
});
</code></pre>

Instead event.preventDefault() you can return false. <a href="https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false">Here's the difference.</a>

And the code:

<pre><code>$(document).ready(function() {
 $('input').on('drop', function() {
 return false;
 });
});
</code></pre>

blocks|key|1377449|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377450|$('#id').on('mousedown',+function(event){
++++event.preventDefault();
}|code-block|syntax|javascript|1377451|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this

<pre><code>$('#id').on('mousedown', function(event){
 event.preventDefault();
}
</code></pre>

blocks|key|1592660|text|这个JQuery为我工作:-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592661|$(document).ready(function()+{
++$('#con_image').on('mousedown',+function(e)+{
++++++e.preventDefault();
++});
});|code-block|syntax|javascript|1592662|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This JQuery Worked for me :- 

<pre><code>$(document).ready(function() {
 $('#con_image').on('mousedown', function(e) {
 e.preventDefault();
 });
});
</code></pre>

blocks|key|1592735|text|只需使用draggable="false"属性即可禁用拖动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1592736|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable+http://www.w3schools.com/tags/att_global_draggable.asp|1592737|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable|1|http://www.w3schools.com/tags/att_global_draggable.asp^0|4|H|0|0|25|0|26|1I|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]|$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

You can disable dragging simply by using <code>draggable=&quot;false&quot;</code> attribute.
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable</a>
<a href="http://www.w3schools.com/tags/att_global_draggable.asp" rel="noreferrer">http://www.w3schools.com/tags/att_global_draggable.asp</a>

blocks|key|1592830|text|对于input元素，this+answer适合我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1592831|我在Angular+4中的一个自定义输入组件上实现了它，但我认为它可以用纯JS实现。|1592832|HTML|1592833|<input+type="text"+[(ngModel)]="value"+(ondragenter)="disableEvent($event)"+
(dragover)="disableEvent($event)"+(ondrop)="disableEvent($event)"/>|code-block|syntax|javascript|1592834|组件定义(JS)：|1592835|export+class+CustomInputComponent+{+

++//component+construction+and+attribute+definitions

++disableEvent(event)+{
++++event.preventDefault();
++++return+false;
++}
}|1592836|entityMap|0|LINK|mutability|MUTABLE|url|https://bertrandg.github.io/html5-disable-drop-on-input/^0|2|5|A|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

For <code>input</code> elements, <a href="https://bertrandg.github.io/html5-disable-drop-on-input/" rel="nofollow noreferrer">this answer</a> works for me.

I implemented it on a custom input component in Angular 4, but I think it could be implemented with pure JS.

HTML

<pre><code>&lt;input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/&gt;
</code></pre>

Component definition (JS):

<pre><code>export class CustomInputComponent { 

 //component construction and attribute definitions

 disableEvent(event) {
 event.preventDefault();
 return false;
 }
}
</code></pre>

blocks|key|1592902|text|使用@SyntaxError的答案https://stackoverflow.com/a/13745199/5134043|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1592903|我已经设法在React中做到了这一点；我能想出的唯一方法是将ondragstart和ondrop方法附加到ref，如下所示：|1592904|++const+panelManagerBody+=+React.createRef<HTMLDivElement>();
++useEffect(()+=>+{
++++if+(panelManagerBody.current)+{
++++++panelManagerBody.current.ondragstart+=+()+=>+false;
++++++panelManagerBody.current.ondrop+=+()+=>+false;
++++}
++},+[panelManagerBody]);

++return+(
++++<div+ref={panelManagerBody}>|code-block|syntax|javascript|1592905|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/13745199/5134043^0|H|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

using @SyntaxError's answer, <a href="https://stackoverflow.com/a/13745199/5134043">https://stackoverflow.com/a/13745199/5134043</a>

I've managed to do this in React; the only way I could figure out was to attach the ondragstart and ondrop methods to a ref, like so:

<pre><code> const panelManagerBody = React.createRef&lt;HTMLDivElement&gt;();
 useEffect(() =&gt; {
 if (panelManagerBody.current) {
 panelManagerBody.current.ondragstart = () =&gt; false;
 panelManagerBody.current.ondrop = () =&gt; false;
 }
 }, [panelManagerBody]);

 return (
 &lt;div ref={panelManagerBody}&gt;
</code></pre>

blocks|key|1592918|text|我就把它留在这里吧。在我尝试了所有方法后帮了我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592919|+++$(document.body).bind("dragover",+function(e)+{
++++++++e.preventDefault();
++++++++return+false;
+++});

+++$(document.body).bind("drop",+function(e){
++++++++e.preventDefault();
++++++++return+false;
+++});|code-block|syntax|javascript|1592920|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I will just leave it here. Helped me after I tried everything.

<pre><code> $(document.body).bind("dragover", function(e) {
 e.preventDefault();
 return false;
 });

 $(document.body).bind("drop", function(e){
 e.preventDefault();
 return false;
 });
</code></pre>

blocks|key|1377779|text|这个问题很老，但回答起来永远都不会太晚。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377780|$(document).ready(function()+{
++//prevent+drag+and+drop
++const+yourInput+=+document.getElementById('inputid');
++yourInput.ondrop+=+e+=>+e.preventDefault();

++//prevent+paste
++const+Input+=+document.getElementById('inputid');
++Input.onpaste+=+e+=>+e.preventDefault();
});|code-block|syntax|javascript|1377781|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Question is old, but it's never too late to answer.
<pre><code>$(document).ready(function() {
 //prevent drag and drop
 const yourInput = document.getElementById('inputid');
 yourInput.ondrop = e =&gt; e.preventDefault();

 //prevent paste
 const Input = document.getElementById('inputid');
 Input.onpaste = e =&gt; e.preventDefault();
});
</code></pre>

blocks|key|1377942|text|您可以简单地在元素本身上使用draggable="false“，否则可以将|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377943|on-mousedown="preventDefaultDrag"
...
preventDefaultDrag:+function(ev)+{
+++ev.preventDefault();
},|code-block|syntax|javascript|1377944|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can simply use draggable=&quot;false&quot; on the element itself, else you can put
<pre><code>on-mousedown=&quot;preventDefaultDrag&quot;
...
preventDefaultDrag: function(ev) {
 ev.preventDefault();
},
</code></pre>

I'm working on a web application for which I'm attempting to implement a full featured windowing system. Right now it's going very well, I'm only running into one minor issue. Sometimes when I go to drag a part of my application (most often the corner div of my window, which is supposed to trigger a resize operation) the web browser gets clever and thinks I mean to drag and drop something. End result, my action gets put on hold while the browser does its drag and drop thing.

Is there an easy way to disable the browser's drag and drop? I'd ideally like to be able to turn it off while the user is clicking on certain elements, but re-enable it so that users can still use their browser's normal functionality on the contents of my windows. I'm using jQuery, and although I wasn't able to find it browsing the docs, if you know a pure jQuery solution it would be excellent.

In short: I need to disable browser text selection and drag-and-drop functions while my user has the mouse button down, and restore that functionality when the user releases the mouse.

Disable Drag and Drop on HTML elements?

jQuery

HTML5

我正在开发一个web应用程序，我试图为它实现一个功能齐全的窗口系统。现在一切都很顺利，我只遇到了一个小问题。有时，当我拖动应用程序的一部分(通常是窗口的角落div，这应该会触发调整大小的操作)时，web浏览器会变得很聪明，认为我是在拖放什么东西。最终结果是，当浏览器执行拖放操作时，我的操作会被搁置。有没有一种简单的方法...

问是否禁用对HTML元素的拖放？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否禁用对HTML元素的拖放？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否禁用对HTML元素的拖放？
EN