php - 如何检测鼠标光标在div中的位置

Question

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

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

我想不出一种优雅的方式来做到这一点！有小费吗？

Answer 1

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

-编辑-

作为对评论的回应，通过此插件添加了对 Firefox 的后备支持

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

演示小提琴：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;
}