0

I have MS Excel WebApp document embeded in my web page using JavaScript option (not an iframe). I want to prevent users to click on the cells and selecting them this way (at least for some columns).

But when I make a jquery function which catches a click in the outer Excel div, nothing happens because some inner div of some cell of the Excel table catches it. Problem is, that I can't change (remove click functions) the content of the embeded Excel document, because it is generated automaticaly.

So the question is: How can I prioritize the outer div click funcion and prevent to fire a click event on the inner div without changing the content of the inner div?

Thanks

fishead
  • 1
  • 1
  • You can't, but you could position a transparent div over the top of it. This will also interfere with mouse wheel events, etc. But it sounds like you want a table rather than a spreadsheet... – Dave Mar 23 '13 at 02:07
  • Yes, I had this idea too. But I need a spreadsheet because it is used as a calculator. And I need to lock some cells (with counting functions) by prevent users to click on them. Maybe I really have to make a transparent div over the spreadsheet. thanks! – fishead Mar 23 '13 at 02:13
  • Couldn't you just code your calculations in javascript? It's pretty easy to make a table behave like a semi-editable spreadsheet (with styled input boxes for the editable bits). It gets a lot harder if you need to let the user write formulas, but it sounds like that's not something you need. – Dave Mar 23 '13 at 02:18
  • Yeah maybe it could be more simple. I like the option of simple editing that table by other coleagues on the web, but it is not so necessary. I heard about Event capturing model in JS which can fire outer div click by first and then call inner div click. But I don't know how it works. Here is the [link](http://stackoverflow.com/a/2385180/1953743) about it. – fishead Mar 23 '13 at 02:26
  • Not something I've ever used, but this may help you: http://javascript.info/tutorial/bubbling-and-capturing#capturing Note that it isn't supported in IE8 or earlier. – Dave Mar 23 '13 at 02:30
  • Thank you very much Dave! I will try the transparent div and if it not work then I will make my own table. – fishead Mar 23 '13 at 02:34

1 Answers1

1

Have you tried using event.stopImmediatePropagation()? I've setup a quick fiddle here.

jQuery Docs:

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

darshanags
  • 2,519
  • 1
  • 13
  • 19
  • I have edited your [fiddle](http://jsfiddle.net/Cm3S7/). As you can see, the inner function is called before the outer function - in the bubling up direction. Generally event call goes down the tree (propagating) firstly and then up the tree (bubling). But jquery does not support calling functions from the propagating (down the tree) direction, so the outer function is called in a time of bubling (up the tree direction). As I found out, there is a way how to call a funcion from the propagating direction using event handlers, but it is not supported by IE and it is not so elegant. – fishead Mar 26 '13 at 23:18