如何检测鼠标光标在div中的位置[重复]

Question

我有一个 100 像素宽的矩形跨度，我希望用户在 0-100% 之间进行选择。

无论他们在 div 中沿宽度单击的哪个位置，该值都会被保存并立即使用 ajax 显示给用户。因此，如果他们正好点击 div 的中间，则保存的值将是 50%。

我想不出一种优雅的方式来做到这一点！有什么建议吗？

Answer 1

考虑将<input type="range"/> 与<span> 结合使用

-编辑-

作为对评论的回应，通过this plugin添加了对 Firefox 的后备支持

Updated Demo Fiddle with Polyfill : http://jsfiddle.net/V3ygq/2/

Demo Fiddle: http://jsfiddle.net/V3ygq/

HTML

将范围放在 100px 宽的 <span> 内。

<div id="console">...</div>
<span id="container">
     <input id="myRange" type="range" min="0" max="100" />
</span>

jQuery

在 change() 上，使用以下值执行操作：

$(function () {
    $("#myRange").on('change', function () {
        // Pull out value, set html of #console DIV
        $("#console").html($(this).val());
    });
    // Set initial value of #console
    $("#myRange").trigger('change');
});

CSS

隐藏<span> 中的范围选择器，但仍允许点击更改其值

#container {
    width: 100px;
    background: #333;
}
#container input {
    opacity: 0;
}