Question

我遇到此问题，我需要将onmousedown和onselectstart个事件添加到某些html元素中。我试过这个，但因为它们不是属性，所以这不起作用。

$(".question, p, b, span, img").each(function(){ 
   $(this).addClass("disableSelection");
   $(this).attr("onmousedown", "return false;");
   $(this).attr('onselectstart', 'return false;');
});

有什么想法吗？

示例

<p onmousedown="return false;" onselectstart="return false;">Adding events</p>

Answer 1

您应该使用JS添加事件处理程序，而不是过时的on*事件属性。还没有必要遍历元素。试试这个：

$(".question, p, b, span, img")
    .addClass('disableSelection');
    .on('mousedown selectstart', function() {
        return false;
    });

请注意，通过在事件处理程序中使用return false，您也可以停止传播。如果问题可能只是使用事件的preventDefault()方法传递给事件处理程序。

此外，如果您要删除已附加到这些事件的所有事件处理程序，则可以使用off()方法提供更好的服务，例如.off('mousedown selectstart');

Answer 2

JavaScript中的事件不是HTML元素的属性。

您可以添加以下内容：

$(".question, p, b, span, img").mousedown(function(){ 
    return false;
});

请参阅此文档页面：https://api.jquery.com/mousedown/

此外，您不应使用.each函数来迭代所选元素。 jQuery会为你处理它，所以为了添加类，在你的例子中，我建议你这样做：

$(".question, p, b, span, img").addClass("disableSelection");

Answer 3

为防止用户选择文字，您可以使用以下CSS。

来自How to disable text selection highlighting using CSS?

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

将事件添加到html元素

3 个答案: