Turn buttons to able to be clicked with middle mouse buttons

Question

I want to turn buttons like the following to be clickable by the middle mouse button so it will be possible to open them in new tabs.

These buttons are on Aliexpress' orders page:

<button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
     Confirm Goods Received
</button>

I tried to turn them into a but then they don't work.

These don't work either: Fiddle (note that the buttons on AE don't have a link).

Is there another way to inject a script that will turn all the buttons on a page to be tab clickable?

`a`s will require the `href`s to be resolved beforehand, to open the links in new tabs. You can't resolve the hyperlinks by the JS to do this. — 31piy, Nov 10 '17 at 09:14

score 2 · Accepted Answer · answered Nov 10 '17 at 09:27

2

Try following code might help

Reference

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode = e.button;

    if (btnCode === 1) {
     console.log('Middle button');
        
    }
}

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click With 
Middle Button</button>

answered Nov 10 '17 at 09:27

Nisal Edu

7,237
4
28
34

OK that does register a middle click event, but now how can I turn this into a left button click? – shinzou Nov 10 '17 at 11:10
I meant how can I make that middle click to actually press the button and open the page in a new tab, this just writes to console when I middle click that button. – shinzou Nov 10 '17 at 11:15
I don't want to open google... I want to open the page that was supposed to be opened by that button, but those buttons don't have a link to that page... – shinzou Nov 10 '17 at 11:37
OK I might be able to use this to go to the page I want by taking the id from the button, although it's not a perfect because it will work with only one type of buttons. – shinzou Nov 10 '17 at 11:42
I ended up doing this with your approach, thanks. https://codepen.io/anon/pen/zPZKby – shinzou Nov 10 '17 at 12:03

score 1 · Answer 2 · answered Nov 10 '17 at 09:25

You can wrap your button in an anchor tag and add the target="_blank" to force the window to open in new tab.

 <a href="link" target="_blank"><button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
                    Confirm Goods Received
                 </button></a>

Znaneswar · Answer 3 · 2017-11-10T09:57:40.957

1

You can simply write mousedown event instead of onclick like this

check updated fiddle : https://jsfiddle.net/1gd8m9y4/3/

<form action="http://google.com">
    <input type="submit" value="Go to Google" href="google.com" onmousedown="window.open('http://www.gooogle.com/')" />
</form>

<input type="button" onmousedown="window.open('http://www.gooogle.com/')" value="Go to Google" />

Simple solution for detection of mouse middle click event

$('.test').mousedown(function(event) {
if(event.which == "2")
alert("middle click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://google.com">
    <input type="submit" value="Go to Google" href="google.com" />
</form>

<input type="button" class="test" value="Go to Google" />

edited Nov 10 '17 at 09:57

answered Nov 10 '17 at 09:52

Znaneswar

3,329
2
16
24

But how can this work with the button's code in my question though? – shinzou Nov 10 '17 at 10:59
I mean not the code in jsfiddle, those were just failed attempts. – shinzou Nov 10 '17 at 11:06
use `mousedown` event it will works can you share the link of source when you have seen that – Znaneswar Nov 10 '17 at 11:32

score 0 · Answer 4 · answered Nov 10 '17 at 09:15

0

If you are using anchor tag use attribute target="_blank" to open a new tab and use href to add the link

answered Nov 10 '17 at 09:15

brk

48,835
10
56
78

_I tried to turn them into `a` but then they don't work._ - I believe this statement clarifies that the OP has already tried luck with anchor tags. Anchors will open in new tab generally, when you click middle mouse button over them, without the need of an explicit `target`. – 31piy Nov 10 '17 at 09:17
But I don't have a href link on those buttons, see the button's code in my question. – shinzou Nov 10 '17 at 11:00

score 0 · Answer 5 · answered Nov 10 '17 at 09:26

0

I suppose that code snippet should solve your problem

.btn {
  background-color: grey;
  padding: 5px;
  margin: 5px;
  
  height: 15px;
  width: 90px;
}

.btn-link {
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  color: #000000;
}

<a class="btn btn-link" rel="details" href="http://google.com" target="_blank">Go to Google</a>

answered Nov 10 '17 at 09:26

RQman

431
1
5
20

See the code in the question, that's what's important, not the jsfiddle, I don't have a link there. – shinzou Nov 10 '17 at 11:10
Could you clarify what mean `open them [buttons ?] in new tabs.` – RQman Nov 10 '17 at 11:32
See the button in the question, it navigates to another page when left clicked, but middle click does nothing, I want middle click to open that page in a new tab. – shinzou Nov 10 '17 at 11:36
Have you seen that post https://stackoverflow.com/q/4643958/3047033 or https://stackoverflow.com/q/4866782/3047033 ? – RQman Nov 10 '17 at 12:04
That's not what I ask, I want middle click to open it, and I don't have a link on those buttons. All of this is meant to be injected into AE pages. – shinzou Nov 10 '17 at 12:06
I'm not sure I follow, can you put it on jsfiddle or codepan? – shinzou Nov 10 '17 at 12:55
@shinzou actually my previous comment was absolutely wrong. Actually behavior that you would like to implement is a hack. If you want to inject some script which should get result of button clicking and open that result in new tab, maybe you'll need see to public API if it exist. – RQman Nov 10 '17 at 15:56

Turn buttons to able to be clicked with middle mouse buttons

5 Answers5