如何在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;
}