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.
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 */ }stopping event bubble
<td>document:event.stoppropagation()stop bubbling event documentmousemove(),mouseup()listenerlogic: storing first cell selection has started (
mousedown()event on cell). then, checking cell selection has stopped(mouseup()event).modified html better usage.
- added
data-attribute on cells storing row-column information
updated-2016-11-11
- added jquery-ui
selectmenureplace<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