Следующий код позволяет пользователю выбрать текст, нажав на него. Если пользователь хочет выбрать несколько текстовых строк. Пользователь просто должен нажать Ctrl и клик. Пользователь может изменить цвет выделенного текста на зеленый, нажав кнопку «Зеленый цвет». По крайней мере, один текст остается выделенным.
Весь текст отменяется, когда пользователь нажимает клавишу Esc на клавиатуре. Функцию Esc я не хочу выполнять, когда пользователь щелкает где-либо, кроме текста и кнопки «Зеленый цвет».
Чтобы достичь этого, я пытался зафиксировать событие click для «this», используя закомментированный код, а затем распознать, имеет ли он класс «выбираемый», если нет, то удалить класс obj_select из всех элементов, имеющих класс «выбираемый», но кажется, это не захватывает текстовый элемент. Но даже когда я нажимаю на «Текст», jquery не распознает элемент с классом «выбираемый», а выбирает весь документ.
Пожалуйста, помогите отменить выделение при нажатии за пределами текста и кнопке «Зеленый цвет».
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style type="text/css">
.obj_select{
outline: dashed;
outline-width: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.js"></script>
</head>
<body>
<div style='left:"100px";'>
<svg id="limits" width=350 height=350>
<text id="demo_text_1" class="selectable" x="10" y="20" transform="translate(10,0)" fill="red">This is Demo Text 1</text>
<text id="demo_text_2" class="selectable" x="10" y="40" fill="red">This is Demo Text 2</text>
<text id="demo_text_3" class="selectable" x="10" y="60" fill="red">This is Demo Text 3</text>
</svg>
<button id="green" class="formatter">Green Color</button>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
/*
$(this).on('click',function(event) {
alert($(this).attr("class"));
if(!$(this).hasClass('selectable') && !$(this).hasClass('formatter'))
{
$(".selectable").removeClass('obj_select');
}
});
*/
$(".selectable").on("click",function(evt){
console.log($(this));
if (!evt.ctrlKey)
{
$(".selectable").not(this).removeClass('obj_select');
}
$(this).addClass("obj_select");
});
$(document).keyup(function(e) {
if (e.key === "Escape") {
$(".selectable").removeClass('obj_select');
}
});
$("#green").on("click",function(){
$(".obj_select").css({
fill: 'green'
});
});
});
</script>
</body>
</html>