Question

这可能已经被问过了，所以如果有的话，我为重新发帖道歉，但是当用户按下鼠标按钮时，我正试图获取一个按钮来向文档添加内容，然后将其删除在用户释放鼠标按钮时返回原始状态。我如何得到类似的东西？这是我到目前为止所拥有的。

var test = 'Hi';

$('#annun').on('mousedown', function(){
    $('body').append(test);
});

$('#annun').mouseup(function(){
    $(test).remove();
});

Answer 1

您需要一个实际的节点，而不仅仅是一个字符串。对于纯文本节点，您可以使用本机方法：

var test = document.createTextNode('Hi')

$('#annun').on({
    mousedown: function(){
        $('body').append(test);
    },
    mouseup: function(){
        $(test).remove();
    }
});

FIDDLE

Answer 2

在你的代码中，你将一个字符串添加到一个元素，jQuery将为你转换为textNode。问题是当你调用$(test).remove()时jQuery不知道如何删除测试，所以你必须自己使test成为一个textNode或者将它包装在一个元素中。这将允许jQuery与textNode进行交互，因为它将具有正确的引用。

使测试成为textNode

var $test = $.parseHTML('Hi');//make textNode

或者让测试成为一个元素

var $test = $('<span>Hi</span>');//make element

然后追加/删除对DOM的jQuery引用

$('#annun').one('mousedown', function(){
    $('body').append($test);
})
.one('mouseup', function(){
    $test.remove();
});

Answer 3

为了做到这一点，您需要采取以下几个步骤：

在鼠标按下时，创建一个节点并将其放在文档中。在下面的示例中，创建了一个范围并将其放置在ID为 content 的div中。
在鼠标向上时，清除容纳所有内容的新节点的容器。在下面的示例中，jQuery的.empty()在id为 content 的div上调用。

以上步骤可创造所需效果。请参阅下面的代码并查看随附的小提琴。

<强> HTML：

<button type="button">Show Hidden Content</button>
<div id="content"></div>

<强> JavaScript的：

$(function () {
    var $content = $('#content');
    $('button').off().on('mousedown', function () {
        $('<span />', { text: "Argh! You found my hidden text!" }).appendTo($content);
    }).on('mouseup', function () {
        $content.empty();
    });
});

<强> Fiddle

关于点击事件

3 个答案: