How to make the browser focus not to jump to other object?

Plugins
1

I'm writing a small plugin that adds some buttons to OctoPrint navbar.

navbarButtons
navbarButtons2346×486 152 KB

So far it works.
My problem: if one of this buttons is clicked, the focus jumps to Webcam area.
How can I make the focus stay at navbar after clicking one of this buttons?

Code is just a small _init_.py and a jinja2 template.
The template:

<a href="#" style="padding: 0px 5px 0px 5px">
	<button id="electric2on" class="btn" onclick='OctoPrint.simpleApiCommand("PrnBaseStatus", "LEOONOFF", {"REQ_CGRU_LABEL":1,"REQ_CVAL_LABEL":1})' style="height: 32px; text-align:center;" title="Strom: OFF&#x000D;Click to switch" >
		<span class="fa-stack" style="font-size: 11px" >
			<i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
			<i class="fas fa-plug fa-stack-1x"></i>
		</span>
	</button>
	<button id="electric2off" class="btn" onclick='OctoPrint.simpleApiCommand("PrnBaseStatus", "LEOONOFF", {"REQ_CGRU_LABEL":1,"REQ_CVAL_LABEL":0})' style="height: 32px; text-align:middle;" title="Strom: ON&#x000D;Click to switch">
		<span class="fa-stack" style="font-size: 11px" >
			<i class="far fa-circle fa-stack-2x" style="color:green;"></i>
			<i class="fas fa-plug fa-stack-1x" style="color:green;"></i>
		</span>
	</button>
	<button id="printer2on" class="btn" onclick='OctoPrint.simpleApiCommand("PrnBaseStatus", "LEOONOFF", {"REQ_CGRU_LABEL":2,"REQ_CVAL_LABEL":1})' style="height: 32px; text-align:top;" title="Drucker: OFF&#x000D;Click to switch">
		<span class="fa-stack" style="font-size: 11px">
			<i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
			<i class="fas fa-print fa-stack-1x"></i>
		</span>
	</button>
	<button id="printer2off" class="btn" onclick='OctoPrint.simpleApiCommand("PrnBaseStatus", "LEOONOFF", {"REQ_CGRU_LABEL":2,"REQ_CVAL_LABEL":0})' style="height: 32px; text-align:center;" title="Drucker: ON&#x000D;Click to switch">
		<span class="fa-stack" style="font-size: 11px">
			<i class="far fa-circle fa-stack-2x" style="color:green;"></i>
			<i class="fas fa-print fa-stack-1x" style="color:green;"></i>
		</span>
	</button>
</a>
2

Ah, I think you might be running into a key press going through to a hyperlink possibly. If you look at the rendered code in the browser's developer console can you tell if that is the case? If so then it's probably allowing your click event to make it down to that rather than blocking it.

3

Bingo - very good!

I removed the hyper link "#" at template <a> definition and it works without that jump.

It seems that it had been a typically "one doesn't know what he does" problem.
I just copied the template skeleton without knowing, what the hyper link "#" at anchor element (<a>) definition is for.
I thought "it has to be there to make it working"

4

Cool. IIRC that example also uses knockout binding to the click event or href attribute. In either case that would automatically take over the # link and/or prevent the click event from passing through.