mouseevent - Javascript: prevent dropdown open when selecting -


i want prevent dropdown menu opened when selecting range of cells. know, can add onmousedown event , call event.preventdefault()

the problem disable dropdown single click event too. there way distinguish between selection of range (the mouse pressed , not released) , click on single cell (mouse pressed , released)? have tried onselectstart doesn't me in case.

here small demo: https://jsfiddle.net/vqsv99t4/2/

i have updated code work according need.

  1. disable text selection: removed javascript css

    .noselect {   -webkit-touch-callout: none; /* ios safari */     -webkit-user-select: none; /* chrome/safari/opera */      -khtml-user-select: none; /* konqueror */        -moz-user-select: none; /* firefox */         -ms-user-select: none; /* internet explorer/edge */             user-select: none; /* non-prefixed version,                                   not supported browser */ }

    source: https://stackoverflow.com/a/4407335/1957036

  2. stopping event bubble <td> document: event.stoppropagation() stop bubbling event document mousemove() , mouseup() listener

  3. logic: storing first cell selection has started (mousedown() event on cell). then, checking cell selection has stopped(mouseup() event).

  4. modified html better usage.

  5. added data- attribute on cells storing row-column information

updated-2016-11-11

  1. added jquery-ui selectmenu replace <select>.

    reason: <select> dropdown can't triggered using javascript/jquery.

//console.clear();    var button_left = 1,    button_right = 2;    var startcell = null;      (function() {      $("#select").selectmenu();      $(".mouse-event-cell")      .on('mousedown', onmousedown)      .on('mouseup', onmouseup)      .on('mousemove', onmouseover);    $(document)      .on('mousemove', ondocmouseover)      .on('mouseup', ondocmouseup);  })();    function ondocmouseover(e) {    if (e.buttons !== button_left) {      startcell = null;      clearfill();    }  }    function ondocmouseup(e) {    if (e.buttons !== button_left) {      startcell = null;      clearfill();    }  }    function onmousedown(e) {    isinsidecell = true;      if (startcell === null)      startcell = e.currenttarget;  };    function onmouseover(e) {    if (startcell !== null) {      fill(startcell, e.currenttarget, 'region');    }    e.stoppropagation();  }    function onmouseup(e) {    var endcell = e.currenttarget;      if (startcell !== null) {      fill(startcell, endcell, 'selected');    }      startcell = null;    e.stoppropagation()  }    function fill(startcell, endcell, classtoadd) {    var col0 = startcell.dataset['column'],      row0 = startcell.dataset['row'],      col1 = endcell.dataset['column'],      row1 = endcell.dataset['row'],      colmin = math.min(col0, col1),      colmax = math.max(col0, col1),      rowmin = math.min(row0, row1),      rowmax = math.max(row0, row1);      clearfill();      if (startcell === endcell) {      console.log('same-cell');    } else {      console.log('range-of-cell');    }      //console.log(startcell, endcell);        (var itcol = colmin; itcol <= colmax; itcol++) {      (var itrow = rowmin; itrow <= rowmax; itrow++) {        $('#codexpl .mouse-event-cell#cell_' + itrow + '_' + itcol).addclass(classtoadd);      }    }  }    function clearfill() {    $('#codexpl .mouse-event-cell').removeclass('selected').removeclass('region');  }
.ui-selectmenu-button.ui-button {    width: 5em;  }  select {    width: auto;  }  table {    border-collapse: separate;  }  td.mouse-event-cell {    border: 1px solid #ddd;    padding: 2px 10px;    height: 30px;    /*to disable text selection*/    -webkit-touch-callout: none;    /* ios safari */    -webkit-user-select: none;    /* chrome/safari/opera */    -khtml-user-select: none;    /* konqueror */    -moz-user-select: none;    /* firefox */    -ms-user-select: none;    /* internet explorer/edge */    user-select: none;    /* non-prefixed version,                                    not supported browser */  }  td.selected {    background-color: goldenrod;    color: white;  }  td.region {    border-style: dashed;    border-color: #bbb;  }
<!doctype html>  <html>    <head>    <meta name="description" content="selecting multiple cells">    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>js bin</title>      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>      <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>    </head>    <body>    <table id="codexpl">      <tr>        <th>#</th>        <th>columna</th>        <th>relative</th>        <th>isso</th>      </tr>      <tr>        <td id="cell_0_0" data-row="0" data-column="0" class='mouse-event-cell'>          <select id="select">            <option value="volvo">volvo</option>            <option value="saab">saab</option>            <option value="mercedes">mercedes</option>            <option value="audi">audi</option>          </select>        </td>        <td id="cell_0_1" data-row="0" data-column="1" class='mouse-event-cell'>cell[0][1]</td>        <td id="cell_0_2" data-row="0" data-column="2" class='mouse-event-cell'>cell[0][2]</td>        <td id="cell_0_3" data-row="0" data-column="3" class='mouse-event-cell'>cell[0][3]</td>        <td id="cell_0_4" data-row="0" data-column="4" class='mouse-event-cell'>cell[0][4]</td>      </tr>      <tr>        <td id="cell_1_0" data-row="1" data-column="0" class='mouse-event-cell'>cell[1][0]</td>        <td id="cell_1_1" data-row="1" data-column="1" class='mouse-event-cell'>cell[1][1]</td>        <td id="cell_1_2" data-row="1" data-column="2" class='mouse-event-cell'>cell[1][2]</td>        <td id="cell_1_3" data-row="1" data-column="3" class='mouse-event-cell'>cell[1][3]</td>        <td id="cell_1_4" data-row="1" data-column="4" class='mouse-event-cell'>cell[1][4]</td>      </tr>      <tr>        <td id="cell_2_0" data-row="2" data-column="0" class='mouse-event-cell'>cell[2][0]</td>        <td id="cell_2_1" data-row="2" data-column="1" class='mouse-event-cell'>cell[2][1]</td>        <td id="cell_2_2" data-row="2" data-column="2" class='mouse-event-cell'>cell[2][2]</td>        <td id="cell_2_3" data-row="2" data-column="3" class='mouse-event-cell'>cell[2][3]</td>        <td id="cell_2_4" data-row="2" data-column="4" class='mouse-event-cell'>cell[2][4]</td>      </tr>      <tr>        <td id="cell_3_0" data-row="3" data-column="0" class='mouse-event-cell'>cell[3][0]</td>        <td id="cell_3_1" data-row="3" data-column="1" class='mouse-event-cell'>cell[3][1]</td>        <td id="cell_3_2" data-row="3" data-column="2" class='mouse-event-cell'>cell[3][2]</td>        <td id="cell_3_3" data-row="3" data-column="3" class='mouse-event-cell'>cell[3][3]</td>        <td id="cell_3_4" data-row="3" data-column="4" class='mouse-event-cell'>cell[3][4]</td>      </tr>      <tr>        <td id="cell_4_0" data-row="4" data-column="0" class='mouse-event-cell'>cell[4][0]</td>        <td id="cell_4_1" data-row="4" data-column="1" class='mouse-event-cell'>cell[4][1]</td>        <td id="cell_4_2" data-row="4" data-column="2" class='mouse-event-cell'>cell[4][2]</td>        <td id="cell_4_3" data-row="4" data-column="3" class='mouse-event-cell'>cell[4][3]</td>        <td id="cell_4_4" data-row="4" data-column="4" class='mouse-event-cell'>cell[4][4]</td>      </tr>    </table>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

actually have store importing products store product data insert , update image or image url not insert , update. this xml code name datapro.txt. <products_joined> <productcode>3710_012t</productcode> <vendor_partno>eah5450silent/di/1gd3(lp)</vendor_partno> <productname>test product ta</productname> <hideproduct>n</hideproduct> <stockstatus>20</stockstatus> <lastmodified>1/5/2016 10:25:00 am</lastmodified> <lastmodby>2</lastmodby> <productweight>0.9</productweight> <productprice>100</productprice> <productmanufacturer>asus tek</productmanufacturer> <vendor_price>32.69</vendor_price> <numproductssharingstock>0</numproductssharingstock> <categoryids>107</categoryids> <producturl>http://tebkq.mvlce.servertrust.com/productdetails.asp?productcode=3710_012t</producturl>
Read more

javascript - IE9 error '$'is not defined -

Image
<!--[if lte ie 9]><html class="lte9"><![endif]--><!--[if gt ie 9]><html><![endif]--> <!--[if !ie]><!--> <html> <!--<![endif]--> blah blah <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ asset('js/mypage.js') }}" type="text/javascript"></script> </body> </html> when load page, ie9 brings error '$' not defined . how can solve error? +++ mypage.js $(function(){ //when load page, //ie9 tag not moving. $(window).load(function() { $('div.mask').hide(); }); // when click , willshow show. //for not ie 9 if (!$('html').hasclass('lte9')) { var = $('ul.about > li > span.activebtn');
Read more