获取相对于OnClick事件中控件的鼠标单击位置

Question

I have this bulletedlist:

<asp:BulletedList ID="BLLinks" runat="server" Width="100%" 
BulletStyle="CustomImage" BulletImageUrl="~/Images/link.png" 
OnClick="BLLinks_Click" ></asp:BulletedList>

I need to get the position relative to the bulletedlist item where the user clicked in this event:

protected void BLLinks_Click(object sender, BulletedListEventArgs e)
{
   // check the clicked position in the bulleted list
   // if on the bulleted list image do so and so...
   // if on the bulleted list item text do so and so....

}

Answer 1

You can get the mouse position with client code and store it in a hidden field.

Here is the markup:

<asp:HiddenField ID="hiddenMouseXY" runat="server" />
<asp:BulletedList onmousedown="bulletedListMouseDown(this, event);" ... >
    ...
</asp:BulletedList>

And the Javascript function:

function bulletedListMouseDown(lst, evt) {
    var x = evt.pageX - lst.offsetLeft;
    var y = evt.pageY - lst.offsetTop; 
    var coord = "X: " + x + ", Y: " + y;
    alert(coord);
    document.getElementById('hiddenMouseXY').value = coord;
}

If you want the click to trigger a postback, you can call __doPostBack in the Javascript function.