0

I am now creating selectable and draggable elements of a table. Here is JsFiddle Link (please test as vertically select). The first time selection is fine but when selecting second time , selection may look like below image

enter image description here

I noticed that , after selection the first-time , I click on the header of my table and this may fix the second-time selection. So, I decided to click header of the table by programatically after finished every selection as

function mouseReleased(e) {
    jQuery(".scheduler .header")[0].click();
    ......
}

and checking for sure click event as 

jQuery(".scheduler .header").click(function(e) {
    console.log("Header Clicked !!");
});

Why this doesn't work ? Has differenece between programatically click and manual click on element ?

bonus question : What's wrong with my script or css for achieve selecting columns of table fine ?

Cataclysm
  • 7,592
  • 21
  • 74
  • 123
  • I already read [this question](http://stackoverflow.com/questions/4428292/jquery-javascript-different-behaviours-with-user-click-and-programatically-click) but this did not give any helps for my problem. – Cataclysm Sep 03 '15 at 04:26
  • The `click` event seems to [work fine](http://jsfiddle.net/nLj9yta8/1/) (I've added it on the bottom). I'm not seeing the code you mentioned in the question in your Fiddle. – Spencer Wieczorek Sep 03 '15 at 04:37
  • @SpencerWieczorek yes sir, I didn't describe clicking code on jsfiddle because I would like to show initial code. But now I have edited. – Cataclysm Sep 03 '15 at 04:41
  • BTW , This is not work on Chrome browser. Arrr....... I hope you are using firefox browser. – Cataclysm Sep 03 '15 at 04:43
  • I seem to be able to move them around with both Firefox and Chrome, moving my mouse over for a little over a second shows a grey box, which I can then move around. Can you describe better what is not working? I'm seeing the `console.log()` in both as well. – Spencer Wieczorek Sep 03 '15 at 04:49
  • @SpencerWieczorek grey box is for drag and drop selection group items from one column to another and this has no problem. My problem is selecting **td** tags these has class *item*. Please mouse down and move mouse to down. **td** tags may selected vertically as the distance you go. The first time selecting is ok but second time , you will see as above image. – Cataclysm Sep 03 '15 at 04:57
  • @SpencerWieczorek But you click on header of table after finish every selction of one column , the next selection of column will fine(*this may does as first column selecting*). – Cataclysm Sep 03 '15 at 05:00
  • @SpencerWieczorek selecting **td** tags vertically was do not work on Chrome browser. I don't know yet what I need modify to work on Chrome. But I can't move to testing on Chrome yet. The first thing I would like to do is fully work on FF. – Cataclysm Sep 03 '15 at 05:03
  • Ok, so it seems when I try to select tags vertically, it instead has the grey box which will expand down as the mouse is moved down. It seems to happen on the first time, along with all other times after it. But once you move into a tile horizontally it starts to work fine. Is that the problem? (Note I'm running it on Chrome). Although I'm not running into those odd visuals in your picture above. – Spencer Wieczorek Sep 03 '15 at 05:12
  • @SpencerWieczorek *....the grey box which will expand down as the mouse is moved down. It seems to happen on the first time,* yes sir you got it. This is my problem **It seems to happen on the first time**. At second time , it may be as my image show above. I need to add constraint mouse move vertically also but this is not concern with my problem. Thanks. – Cataclysm Sep 03 '15 at 05:15
  • To me it seems that it's a problem with trying to do this starting on a highlighted box. It will work as long as you start the selection on an empty cell. – Spencer Wieczorek Sep 03 '15 at 05:30
  • @SpencerWieczorek Clicking on other elements before start next selection was fix for this problem. So, I had decided to click programatically but this doesn't work as manual click :( – Cataclysm Sep 03 '15 at 05:37
  • To me it seems clicking on other elements do not fix the problem, it seems like the selection will only work when starting on an non-selected cell. – Spencer Wieczorek Sep 03 '15 at 05:44
  • @SpencerWieczorek Hello sir ! now I think I can fix for my problem. Please check my answer. Thanks for your helping hand. – Cataclysm Sep 03 '15 at 16:28

2 Answers2

1

Now I fond the solution for my problem. This problem causes due to selectable of elements. Now I prevent selection events of my table's td tags. See more for how to disable selecting events of elements. Now I add below script at my JS file and everythings went fine.

$(".item").attr('unselectable', 'on').css({
    '-moz-user-select' : '-moz-none',
    '-moz-user-select' : 'none',
    '-o-user-select' : 'none',
    '-khtml-user-select' : 'none',
    '-webkit-user-select' : 'none',
    '-ms-user-select' : 'none',
    'user-select' : 'none'
}).bind('selectstart', function() {
    return false;
});

Here is updated JsFiddle Link. I also added drag & drop, fix for Chrome browser compactability, select move within same column and remove events. But I did not get yet my OP Is there a difference between a programmatic click and a manual click?.

Community
  • 1
  • 1
Cataclysm
  • 7,592
  • 21
  • 74
  • 123
  • 1
    This seems like an improvement. See [this link](http://stackoverflow.com/questions/11127908/difference-between-click-and-actually-clicking-a-button-javascript-jquery) for the differences between calling `click()` and clicking with the mouse. It's difference depending on which mouse button is pressed, or what element is pressed. But in the general left-click case, it will be the same for the most part. – Spencer Wieczorek Sep 03 '15 at 17:34
0

For security, some browsers limit certain click actions to occurring within the scope of an actual user interaction. This could be the reason you're unable to trigger a click event.

See this previous discussion.

Community
  • 1
  • 1
stef
  • 14,172
  • 2
  • 48
  • 70