Use default event in a single element when default action is prevented for document in javascript

Question

I have an onMousedown and an onMouseup eventhandler on the document that prevents default event.

Now there is a single form element (a select field) where I want to use the default action. Can I somehow call it from javascript?

Something like:

  <select ... onClick="this.browserDefaultAction">

"BrowserDefaultAction" of course dosn't exist - I made it up to explain what I'm looking for.

EDIT:

To make it somewhat clearer -

I have a table representing the days (colums) and times (rows, in units of 5 min). If the user moves the mouse over the table, each cell must show the time it represents.

If the left mouse button is pressed, the times are "set" (the cell is colored blue), if the right mouse button is pressed, the times are "unset" (the cell is colored green). This must happen "on the move", i. e. without clicking on every cell separately.

As reading the status of the mouse buttons directly in the event script didn'T work well, I added this piece of code to store the mousebutton in a custom variable:

var Maustaste = 0;
    function Tastendruck (Ereignis) {

      if (!Ereignis)
        Ereignis = window.event;
        if (Ereignis.buttons)
        {
          if (Ereignis.buttons == 2) {Maustaste=2}
          if (Ereignis.buttons == 1) {Maustaste=1}
        }
    }

    function Tastenlos () {
        Maustaste = 0;

    }
      document.onmousedown = Tastendruck;
      document.onmouseup = Tastenlos;

It worked well so far, even without preventing the default action.

However, moving the mouse with the button pressed also marked the cells. This didn't affect the funcitionality but looked ugly and desturbing for the user. So I just added an Ereignis.preventDefault at the end of the function.

So far, so good, but there's still this select field on the same page. I tried to attach the onmouseup/down eventhandlers not to the document, but to the table or a div container with the table within, but it just didn't work.

I anyone wants to see the page or the full code, here's the adress.

EDIT:

I used the approach

test what element triggered the event and then use prevemtDefaukt() or not as appropriate

...
     if (!Ereignis)
        Ereignis = window.event;
        if (Ereignis.target.tagName != "SELECT")
        {
            if (Ereignis.buttons)

It woks now.

It would probably be simpler to exclude that single element from the original global `preventDefault`, rather than to re-add the functionality. — DBS, Mar 31 '16 at 16:46
You can test what element triggered the event and then use `prevemtDefaukt()` or not as appropriate. But without seeing your JavaScript to handle the prevention of default actions that's as much as we can really say; if you want useful help then please show us your "MCVE" ([mcve]) code. Or you could, in the case of form elements, respond instead to the `change` event. — David Thomas, Mar 31 '16 at 16:47
First, thanks for your thougts. Actually, there are already over 400 lines of script, and extracting just the parts that you would need to understand my problem is a problem in itself. I'll try. — Big Bene, Apr 01 '16 at 06:31

Scott Marcus · Answer 1 · 2016-04-01T13:23:57.120

0

Events propagate upward (bubbling) and downward (capturing) from their source. Since the document is a fairly high level object, it is most likely that the mousedown and mouseup events would actually be triggered by an element further down in the DOM. Because of this, you could simply stop the propagation of the event after allowing the browser to perform its default action.

window.addEventListener("DOMContentLoaded", function(){

    document.addEventListener("mousedown", function(evt){
        // This won't run when you mousedown on the list, but will when you mousedown on the document
        alert("Something in the document or the document itself was moused down on.");
    });
  
    // ****************************************************************************************************  
  
    var list = document.getElementById("lst");
  
    list.addEventListener("mousedown", function(evt){
          alert("My default behavior for mousedown works!");
      
          // Don't let the mousedown propagate to the document
          evt.stopPropagation();
    });
  
  
   
  
});

<select id="lst">
  <option>Choice 1</option>
  <option>Choice 2</option>
  <option>Choice 3</option>
  <option>Choice 4</option>
</select>


<select id="lst2">
  <option>Choice 1</option>
  <option>Choice 2</option>
  <option>Choice 3</option>
  <option>Choice 4</option>
</select>

edited Apr 01 '16 at 13:23

answered Mar 31 '16 at 16:57

Scott Marcus

64,069
6
49
71

This seems to me a good approach, and the best solution probably lies along this route. However, pitily, in it's current form it doesn't work, not even in the test version when I hit the "Run code snippet" button. When I click on the select element in the test page, it alerts me that it's default behavior works, but in fact it doest do so, i. e. the pulldown menu doesn't open. – Big Bene Apr 01 '16 at 12:45
@BigBene What browser are you using, because the code snippet works fine in Chrome and should work in any standards compliant client. – Scott Marcus Apr 01 '16 at 12:55
@BigBene I think this code is working just fine. But, I do think you have a misunderstanding of what "default behavior" means. First, my code (based on yours) is based on `mousedown`, not `click`. And second, the default behavior is not always standardized across clients. The fact that you get the alert with my code tells you that the event is firing and since the only thing in the event handler is to stop the propagation of the event, there is no reason to believe that the event's default behavior where it is intercepted is happening. – Scott Marcus Apr 01 '16 at 13:08
@BigBene Please see: http://stackoverflow.com/questions/19913171/how-to-trigger-the-html-select-onclick-event-activates-select-dropdown-with-opt for details on the `select` element and getting its dropdown to open with code. – Scott Marcus Apr 01 '16 at 13:24
"What browser are you using, because the code snippet works fine in Chrome and should work in any standards compliant client." I use Firefox on Windows 7 (at least here at work, where I'm doing this code). – Big Bene Apr 13 '16 at 09:23

Use default event in a single element when default action is prevented for document in javascript

1 Answers1