javascript - 消失元素上的 OnClick 事件

Question

这是jsfiddle：http: //jsfiddle.net/nGpmP/

当您单击该输入时，会出现右侧的按钮。这个按钮有onclick();事件。问题是，这个事件没有被触发，因为当你点击一个按钮时，它会消失（并且输入失去焦点），并且 javascript 没有被触发。我该怎么做才能执行这个javascript？

Answer 1

在“按钮”上使用 mousedown 事件，因为单击太晚了。

$(document).on('mousedown', '.buttonIcon', function () {
   $(this).prev('input').val('');
});

jsFiddle 示例

Answer 2

不要使用 CSS 焦点选择器来隐藏/显示按钮，而是使用 JavaScript 的 onBlur 隐藏按钮。使用作为 onBlur 方法的第一个参数给出的事件对象，您可以检查“目标”属性是否是按钮 - 如果是，则清除节点。或者，您可以在隐藏按钮之前使用具有较低值（例如 50）的 setTimout()，从而允许在隐藏按钮之前触发单击。

Answer 3

.buttonInput input:not(:focus) ~ .buttonIcon {
    display: none;
}

变成

.buttonInput .buttonIcon {
    display: none;
}

和

.buttonInput input:active ~ .buttonIcon {
    display: inline-block;
}

变成

.buttonInput .buttonIcon:active {
    display: inline-block;
}

这样按钮在您单击它之前不会消失。

http://jsfiddle.net/7uFVS/1/

Answer 4

我对您的 jsfeedle 进行了一些更改。添加了一些 ID 和 2 个 jquery 函数

<div class="buttonInput">
    <input id="inputbox" type="text" placeholder="Status..."/> 
    <div id="clearBtn" class="buttonIcon" onclick="ClearInput(this);">BTN</div> 
</div>
<script>
    $('#inputbox').click(function(){
        $('.buttonIcon').css('display','block');
    });

    $('#clearBtn').click(function(){
        $('#inputbox').val(' ');
    });
</script>

http://jsfiddle.net/Qpd6V/