locked
Detect Right Click ListView

    Question

  • I want to distinguish between when the user left clicks on a listViewItem and when the user right clicks on it.

    A left click triggers "itemInvoked" but right click just selects the item which triggers "selectionchanged" which is a generic event that is always called no matter how the selection was changed.

    My end goal is that is a user left clicks on an item it selects it but doesnt bring up the appBar and if the user right clicks on an item is selects is and brings the app bar, is it possible to do this? 

    Thank you

    Thursday, April 17, 2014 8:47 PM

Answers

  • One possible event you can try is the mousedown event. The mousedown event fires for either left or right click. You can check which one is clicked using "evt.which" and also you can check what you are clicking by using evt.target.id or evt.target.className

    Heres an example: 

    var tempList = document.getElementById('eq2ListView');
                tempList.addEventListener('mousedown', test, false);
                function test(evt) {
                    console.log('mouseBtn: ' + evt.which);
                    console.log('id: ' + evt.target.id);
                    console.log('class: ' + evt.target.className);
                }
    You may get a lot of different ids and classes depending on what you click within your listview, so you would have to play around with that.

    Edit: I wanted to add that for evt.which: 1 = left click, 2 = scroll, 3 = right click
    Sunday, April 20, 2014 4:54 PM

All replies

  • Hi,

    Try something like below:

    document.getElementById("scenarioListView").addEventListener("iteminvoked", itemInvokedHandler, false);
    document.getElementById("scenarioListView").addEventListener("contextmenu", doSelectItem, false)

    The iteminvoked event fires for left click, but the contextmenu event fires for right click.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by r.c.byrne Friday, April 18, 2014 11:21 AM
    • Unmarked as answer by r.c.byrne Friday, April 18, 2014 5:33 PM
    Friday, April 18, 2014 2:14 AM
    Moderator

  • I though this worked, however contextmenu fires whenever I right click which actually causes undesired effects when you click on the listView body. When you right click it hides / shows the appBar, so the issue it brings is I right click, my function hides the app bar, then the default function shows it again.

    Also contextmenu doesnt fire on a touch select event. Does that have a separate event listener? 


    • Edited by r.c.byrne Friday, April 18, 2014 5:36 PM
    Friday, April 18, 2014 5:36 PM
  • One possible event you can try is the mousedown event. The mousedown event fires for either left or right click. You can check which one is clicked using "evt.which" and also you can check what you are clicking by using evt.target.id or evt.target.className

    Heres an example: 

    var tempList = document.getElementById('eq2ListView');
                tempList.addEventListener('mousedown', test, false);
                function test(evt) {
                    console.log('mouseBtn: ' + evt.which);
                    console.log('id: ' + evt.target.id);
                    console.log('class: ' + evt.target.className);
                }
    You may get a lot of different ids and classes depending on what you click within your listview, so you would have to play around with that.

    Edit: I wanted to add that for evt.which: 1 = left click, 2 = scroll, 3 = right click
    Sunday, April 20, 2014 4:54 PM