Unclickable контекстное меню внутри контента editable

У меня есть небольшая проблема с моим контекстным меню внутри контента, редактируемого. Я думаю, что это проблема стиля, но я не могу понять, что она вызывает. Вот что, в моем контекстном меню показано, где он находится, со значением, которое, по его словам, имеет. Но похоже, что это всего лишь блок для него, а не список элементов P внутри моего элемента DIV.Unclickable контекстное меню внутри контента editable

Как вы можете видеть, что мы не можем нажать на элемент Внутри контекстного меню.

Мой CSS:

.ctxmenu 
{ 
    display: block; 
    position: absolute; 
    height: auto; 
    padding: 0px; 
    margin: 0; 
    margin-left: 0.5em; 
    margin-top: 0.5em; 
    border: 1px solid black; 
    background: #F8F8F8; 
    z-index: 11; 
    overflow: visible; 
} 
.ctxline 
{ 
    display: block; 
    margin: 0px; 
    padding: 0px 0px 0px 3px; 
    border: 1px solid #F8F8F8; 
    overflow: visible; 
} 
.ctxline:hover 
{ 
    border: 1px solid #BBB; 
    background-color: #F0F0F0; 
    background-repeat: repeat-x; 
}

Содержание редактируемые CSS:

.rootClass 
{ 
    border:1 solid buttonface; 
    border:2 groove buttonhighlight; 
    OVERFLOW: scroll; 
    OVERFLOW-X: hidden; 
    OVERFLOW-Y: auto; 
    WIDTH: 762px; 
    POSITION: relative; 
    TOP: 65px; 
    left: 10px; 
    HEIGHT: 88%; 
    WORD-WRAP: break-word; 
    FONT-FAMILY :Times New Roman; 
    background-color: white; 
} 

.menu_editeur 
{ 
    border : 0; 
    background-color : #cccccc; 
}

HTML-:

<DIV id=edth_corps contentEditable=true style="WORD-WRAP: break-word; FONT-SIZE: 12pt; BORDER-TOP: buttonhighlight 2px groove; HEIGHT: 400px; FONT-FAMILY: Helvetica; BORDER-RIGHT: buttonhighlight 2px groove; WIDTH: 690px; OVERFLOW-X: hidden; BORDER-BOTTOM: buttonhighlight 2px groove; POSITION: absolute; LEFT: 10px; BORDER-LEFT: buttonhighlight 2px groove; Z-INDEX: 4; TOP: 132px; BACKGROUND-COLOR: white" name="lettre" unselectable="" comportement="F"> 
    <P><SPAN id=0 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">tset</SPAN> pour <SPAN id=1 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">vior</SPAN> 
     <DIV id=ctxmenu1 class=ctxmenu contentEditable=false style="CURSOR: pointer; LEFT: 59px; TOP: 15px"> 
      <P onclick=alertMe(); class=ctxline>viorne</P> 
      <P onclick=alertMe(); class=ctxline>viornes</P> 
     </DIV> 
    </P> 
</DIV>

Или, если вы знаете какие-либо свойства, которые могли бы в конечном итоге сделать это, мой cowerker, возможно, спрятал CSS на другом месте (они не использовали CSS-файл, чтобы поместить весь стиль внутри ...).

Пример того, что он должен делать:

источник

2015-11-26 Slayner

также добавить HTML и результат, который вы ожидаете в качестве ссылки, пожалуйста, конец! –

Обновлено с помощью HTML и результата, который он должен сделать (я вижу, что ctxline: over не берется, HTML считает, что contextMenu - это еще один контент, подходящий, я думаю) – Slayner

@Slayner, не могли бы вы добавить свой HTML в текст? –

Хорошо, ребята, я нахожу anwser. Вы теперь IE не похожи на любой другой веб-браузер, ну, если вы хотите сделать это в IE, вам нужно использовать конкретную вещь для присоединения к событию. На линии, где вы генерировать событие для контекстного меню, вам нужно поставить:

p.attachEvent("onclick", alertMe);

с alerMe это название Вашего мероприятия без «()» в конце. Если вы используете setAttribute или addEventListener, это не сработает.

Если вам нужно добавить некоторые Params в случае, если вы можете сделать это:

p.attachEvent("onclick", function { return myFunction(params1,params2,paramsX)});

источник

2015-11-27 09:32:36 Slayner

Используйте тег Контекстное меню.

<menu type="context" id="mymenu"> 
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/refresh-icon.png"></menuitem> 
    <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/comment_icon.gif"></menuitem> 
    <menu label="Share on..." icon="/images/share_icon.gif"> 
     <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick=""></menuitem> 
     <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick=""></menuitem> 
    </menu> 
</menu>

Вот ссылка видео, я нашел его на Youtube

Приветствия;)

источник

2015-11-26 14:51:57

Я не могу использовать тег menu и menuItem, это для IE11 и туто вы используете JQuery, так как я делаю это в Javascript, это не сработает. Я уже смотрю это видео некоторое время назад, но это не поможет в моем случае, потому что весь контекстMenu генерируется Javascript, а не жестко закодирован на странице. Единственная ошибка, которую я имею, это то, что мой тег внутри contextMenu рассматривается как текст, а не как элемент, который можно щелкнуть. – Slayner

выпуск (на моем конце так или иначе) пришли:

<P onclick=alertMe(); class=ctxline>viorne</P>

«Я заменил его на:

<P onclick=alert("test"); class=ctxline>viorne</P>

[Edit] Вот ваша обновленная скрипка: https://jsfiddle.net/2wown2cr/5/

Это, кажется, чтобы исправить эту проблему. Если у вас все еще есть проблемы, укажите информацию о своем браузере.

источник

2015-11-26 16:40:36

Все еще не работает, я в IE11, а contextMenu генерируется JS, он по-прежнему считается текстовым элементом и поэтому он не доступен для клика (он не видит каждый элемент самостоятельно, а только как большой текст с контентом редактируемый для div). – Slayner

Unclickable контекстное меню внутри контента editable

ответ

Смежные вопросы