windowsforms-devexpress-dot-xtraeditors-dot-baselistboxcontrol-4fc0e8a5.md
Occurs when mouse pointer is over an element of an HTML-CSS template, and a mouse button is pressed.
Namespace : DevExpress.XtraEditors
Assembly : DevExpress.XtraEditors.v25.2.dll
NuGet Package : DevExpress.Win.Navigation
[DXCategory("Data")]
public event ListBoxHtmlElementHandledMouseEventHandler HtmlElementMouseDown
<DXCategory("Data")>
Public Event HtmlElementMouseDown As ListBoxHtmlElementHandledMouseEventHandler
The HtmlElementMouseDown event's data class is DevExpress.XtraEditors.ListBoxHtmlElementHandledMouseEventArgs.
Objects of the DxHtmlElementMouseEventArgs class (and its parent DxHtmlElementEventArgs class) are used inside events and methods that allow you to handle user interactions with HTML elements.
X, Y, Clicks, and Button properties return information about mouse clicks: the mouse button that was clicked, the coordinates of the mouse pointer, and the number of clicks.
You can also read the MouseArgs property to get the same information in an aggregated MouseEventArgs object.
The Bounds property returns the location and actual screen size of an HTML element. For example, the Bounds property for a square <div> element with 50px sides returns Height and Width values of 100 when shown on a display with a 200% Windows scaling option.
When you handle template-related control events (for example, HtmlContentControl.ElementMouseClick), these events are raised for any HTML element with which a user interacts.
<div class='buttonPanel'>
</div>
htmlContentControl.ElementMouseClick += (s, e) => {
// Raises for all three IMG elements
};
AddHandler htmlContentControl.ElementMouseClick, Sub(s, e)
' Raises for all three IMG elements
End Sub
To identify which element has triggered an event, assign unique IDs in HTML markup.
<div class='buttonPanel'>
</div>
Then you can check the ElementId property value to identify HTML elements.
htmlContentControl.ElementMouseClick += (s, e) => {
if(e.ElementId == "btnPhone")
// Action #1
if(e.ElementId == "btnVideo")
// Action #2
if(e.ElementId == "btnText")
// Action #3
};
AddHandler htmlContentControl.ElementMouseClick, Sub(s, e)
If e.ElementId = "btnPhone" Then
' Action #1
End If
If e.ElementId = "btnVideo" Then
' Action #2
End If
If e.ElementId = "btnText" Then
' Action #3
End If
The following markup illustrates four <div> elements nested one inside the other. Each element has its own onclick method called when users click this specific element.
<div class="container1" onclick="func1">
<div class="container2" onclick="func2">
<div class="container3" onclick="func3">
<div class="container4" onclick="func4">
Click Me
</div>
</div>
</div>
</div>
/* Important
* Event handlers must be defined within a container control that hosts the HtmlContentControl.
*/
public partial class Form1 : DevExpress.XtraEditors.XtraForm {
// ...
void func1(object sender, DxHtmlElementMouseEventArgs args) {
// Action #1
}
void func2(object sender, DxHtmlElementMouseEventArgs args) {
// Action #2
}
}
Private Sub func1(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
' Action #1
End Sub
Private Sub func2(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
' Action #2
End Sub
' ...
Important
Event handlers must be defined within a container control that hosts the HtmlContentControl (for example, a form or user control).
When a user clicks any element, the onclick method of this element fires first. After that, each parent HTML element subsequently calls its own onclick method. For example, if a user clicked the inner div element with the container4 style, all four methods are called in a sequence (func4 - func3 - func2 - func1).
This process of subsequent child-to-parent element activation is called bubbling , similar to how a bubble of air floats up in the water. The Bubbles property allows you to identify whether an element can pass the mouse event up through the elements tree. You can set the CancelBubble property to true to stop bubbling at this element.
void func1(object sender, DxHtmlElementMouseEventArgs args) {
// Not called automatically when the element with "func2" is clicked
}
void func2(object sender, DxHtmlElementMouseEventArgs args) {
args.CancelBubble = true;
}
Private Sub func1(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
' Not called automatically when the element with "func2" is clicked
End Sub
Private Sub func2(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
args.CancelBubble = True
End Sub
Note that the Bubbles property is an indicator that tells you whether this element has parent elements that can potentially handle the corresponding mouse event. If so, this property returns true even if you enable the CancelBubble property.
When a user interacts with an HTML & CSS template element, a mouse event bubbles up through the elements tree and finally reaches the templated control itself. For example, when a Data Grid template element is clicked, Data Grid events fire after a sequence of element onclick methods (for instance, BaseView.Click).
You can enable the SuppressOwnerEvent property to prevent mouse events from reaching a control. In this case the control will not fire its native events.
See Also